css制作三角形 实心的和空心的（笔试常考，特此分享）！！！！

制作实心的三角形

<diva id="demo"></div>

#demo{
    width: 100px;
    height: 100px;
    background-color: #333;
    position: relative;      
}
#demo:after{
    border:solid transparent;
    border-left-color:#333;
    border-width:10px;
    width:0;
    content:" ";
    position:absolute;
    left:100%;
    top:10%;  
}
 制作空心的三角型
<diva id="demo"></div>

#demo{
    width: 100px;
    height: 100px;
    background-color:#fff;
    position:relative;
    border: 2px solid #000;    /*整体颜色边框是黑色*/
}
/*小三角*/
#demo:after{
    border:solid transparent;
    border-left-color:#fff;
    border-width:10px;
    content:" ";
    position:absolute;
    left:100%;
    top:20px;    /*20px*/
}
/*大三角*/
#demo:before{
    border:solid transparent;
    border-left-color:#000;
    border-width:12px;   /*10px+2px*/
    content:" ";
    position:absolute;
    left:100%;
    top:18px;    /*20px-2px*/
}

原文：http://www.cnblogs.com/wg-666/p/4890294.html