用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; 
}