在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/