Creating a triangle div with CSS

问题

I have recently learned how to create the appearance of a triangle div with CSS and HTML. Now, I would like to know if it is at all possible to add a border around any of the sides of the triangle div, so that if I gave the div a white background and a black border you could still see it? Is there a way I can do this?

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

回答1:

This is the typical way to do it:

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

来源：https://stackoverflow.com/questions/15083019/creating-a-triangle-div-with-css