html - 在 CSS 三 Angular 形的两侧添加边框？

Question

HTML:

<div class="arrow-right"></div>

CSS:

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid green;
}

结果:

有什么方法可以在结果的两侧生成 1 像素的边框？ (非 180 度的)？

谢谢

Answer 1

100% 纯 CSS，不...但是在其中添加一个额外的 div 并且:

HTML

<div class="arrow-right">
  <div></div>
</div>

CSS

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid black;
}
.arrow-right > div {
    width: 0;
    position: relative;
    left: -60px;
    top: -59px;
    border-top: 59px solid transparent;
    border-bottom: 59px solid transparent;
    border-left: 59px solid green;
}

http://jsfiddle.net/qJJxm/

(将 59 的每个实例替换为较小的数字以形成更宽的边框 - 所有四个都应始终为相同的数字)