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

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较小的数字替换每个实例以使边框更宽 - 所有四个应该始终是相同的数字）

Answer 2

before您可以通过或after伪元素添加边框，向左移动一个像素。

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

.arrow-right:after {
    border-left-color: green;
    content: '';
    display: block;
    position: relative;
    left: -61px;
    top: -60px;
}

http://jsfiddle.net/Nh63r/