css制作三角形

【转载地址】http://www.cnblogs.com/xiaofeixiang/p/5022570.html

原理：定义空div，宽高为0，看成是两横两竖的盒子，两横在上面，箭头指向哪，哪边边框就为0，两边的边框就会靠在一起，形成一个顶点，两边的边框颜色则透明，三角形就是中间重叠部分切出来的

HTML：

<ul>
    <li class="row">
        <span>四个三角</span>
        <div class="triangle">
        </div>
    </li>
    <li class="row">
        <span>上三角</span>
        <div class="triangle-up">
        </div>
    </li>
    <li class="row">
        <span>下三角</span>
        <div class="triangle-down">
        </div>
    </li>
    <li class="row">
        <span>左三角</span>
        <div class="triangle-left">
        </div>
    </li>
    <li class="row">
        <span>右三角</span>
        <div class="triangle-right">
        </div>
    </li>
    <li class="row">
        <span>左下角</span>
        <div class="triangle-left-bottom">
        </div>
    </li>
    <li class="row">
        <span>右下角</span>
        <div class="triangle-right-bottom">
        </div>
    </li>
</ul>

CSS：

ul li{
    list-style: none;
    float: left;
    margin-left: 30px;
}
.row span{
    display: block;
    margin-bottom: 10px;
}
.triangle {
    width: 0;
    height: 0;
    border-top: 20px solid #EEB422;
    border-right: 20px solid #C0FF3E;
    border-bottom: 20px solid #A020F0;
    border-left: 20px solid #7CFC00;
}

.triangle-up {
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-bottom: 40px solid #A020F0;
    border-left: 20px solid transparent;
}

.triangle-down {
    width: 0;
    height: 0;
    border-top: 40px solid #EEB422;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
}

.triangle-left {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 40px solid #7CFC00;
}

.triangle-right {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 40px solid #C0FF3E;
}

.triangle-left-bottom {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid #7CFC00;
}

.triangle-right-bottom {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-right: 40px solid #C0FF3E;
}

效果图：