html - 使用 CSS 创建三 Angular 形 div

Question

我最近学习了如何使用 CSS 和 HTML 创建三 Angular 形 div 的外观。现在，我想知道是否可以在三 Angular 形 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;
}