使用CSS创建一个三角形的div(Creating a triangle div with CSS)

我最近学习了如何创建一个三角形的div的CSS和HTML的外观。 现在，我想知道，如果它是在所有可能添加任何周围的三角形div的两侧的边框，因此，如果我给了DIV白色背景和黑色的边框你仍然可以看到它？ 有没有一种方法，我可以做到这一点？

的jsfiddle： http://jsfiddle.net/c75KM/1/

HTML：

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

CSS：

.arrow-up {
width: 0; 
height: 0; 
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}

Answer 1:

这是做它的典型方式：

的jsfiddle

.arrow-up:after {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    margin-top:1px;
    margin-left:2px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
}

.arrow-up:before {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid black;
}

文章来源: Creating a triangle div with CSS