div付きトライアングル

Question

左の三角形でブロックを作成しています。私は別の三角形に1つの三角形を適用することでこれを作った。しかし、三角形の境界線は1pxではなく2pxになっています。それを修正するには？あなたは他の実装方法を知っているかもしれませんか？どうもうありがとう.............................................. .......................... ....................... ............. ....................................

#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: ""; 
 
\t border-top: 56px solid transparent; 
 
\t border-bottom: 56px solid transparent; 
 
\t border-right: 13px solid #e6e6e6; 
 
\t position: absolute; 
 
\t left: -14px; 
 
\t top: -1px; 
 
\t 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 { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: -6px; 
 
\t width: 6px; 
 
\t height: 6px; 
 
\t margin-top: -4px; 
 
\t border: 1px solid #e6e6e6; 
 
\t background: #fff; 
 
\t border-radius: 50%; 
 
\t z-index: 99; 
 
\t }

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

あなたのピクセル値が少しオフでした。私はそれらを少しきれいにしました、そして、国境は一貫した幅を今持っています。