Triangle with div

Question

我正在用左三角进行块。我通过将一个三角形应用于另一个三角形来做到这一点。但是三角边框的2-3px代替了1Px。如何修复它？也许您知道其他实施方式？非常感谢............................................................................................................................................................................................................................

#crumbs ul li a {
    display: block;
    float: left;
    height: 50px;
    background: #fff;
    text-align: center;
    height: 110px;
    width: 180px;
    position: relative;
    margin: 0 10px 0 0;     
    font-size: 20px;
    text-decoration: none;
    color: #fff;
    border: 1px solid #e6e6e6;
}
#crumbs ul li{
    list-style:none;
}
#crumbs ul li a:before {
    content: '';
    border-top: 56px solid transparent;
    border-bottom: 56px solid transparent;
    border-right: 13px solid #e6e6e6;
    position: absolute;
    left: -13.7px;
    top: -1px;
    z-index: 2;
}
#crumbs ul li a:after {
    content: '';
    border-top: 55px solid transparent;
    border-bottom: 55px solid transparent;
    border-right: 11px solid #fff;
    position: absolute;
    left: -11.5px;
    top: 0px;
    z-index: 2;
}
#crumbs ul li a span:before {
    content: '';
    position: absolute;
    top: 50%;
    left: -6px;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border: 1px solid #e6e6e6;
    background: #fff;
    border-radius: 50%;
    z-index: 99;
}

<div id="crumbs">
    <ul>
        <li>
            <a href="#">
                <span></span>
                <img src="1.png" alt="" />
            </a>
        </li>
    </ul>
</div>

Answer 1

#crumbs ul li a {
    display: block;
    float: left;
    height: 50px;
    background: #fff;
    text-align: center;
    height: 110px;
    width: 180px;
    position: relative;
    margin: 0 10px 0 0;     
    font-size: 20px;
    text-decoration: none;
    color: #fff;
    border: 1px solid #e6e6e6;
}
#crumbs ul li{
        list-style:none;
}
#crumbs ul li a:before {
    content: "";
	border-top: 56px solid transparent;
	border-bottom: 56px solid transparent;
	border-right: 13px solid #e6e6e6;
	position: absolute;
	left: -14px;
	top: -1px;
	z-index: 2;
}
#crumbs ul li a:after {    
content: "";
    border-top: 56px solid transparent;
    border-bottom: 56px solid transparent;
    border-right: 13px solid #fff;
    position: absolute;
    left: -13px;
    top: -1px;
    z-index: 2;
}
#crumbs ul li a span:before {
	content: '';
	position: absolute;
	top: 50%;
	left: -6px;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border: 1px solid #e6e6e6;
	background: #fff;
	border-radius: 50%;
	z-index: 99;
	}

<div id="crumbs">
    <ul>
        <li><a href="#">
        	<span></span>
        	<img src="1.png" alt="">
        </a></li>
    </ul>
</div>

您的像素值有点偏离。我对它们进行了一点清理，现在的边界有一个一致的宽度。