用CSS创建三角形div

Question

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