CSS——CSS实现各种三角形样式

html代码：

	<div class="all"></div>
	
    <div class="top_triangle"></div>

    <div class="bottom_triangle"></div>

    <div class="left_triangle"></div>

    <div class="right_triangle"></div>
    

css代码：

.all{
        width: 0;
        height: 0;
        border-bottom:50px solid yellow;
        border-right: 50px solid green;
        border-left: 50px solid red;
        border-top: 50px solid pink;

    }
    .top_triangle{
        width: 0;
        height: 0;
        border-bottom:50px solid red;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;

    }
    .bottom_triangle{
        width: 0;
        height: 0;
        border-top:50px solid red;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }
    .left_triangle{
        width: 0;
        height: 0;
        border-left: 50px solid red;
        border-bottom:50px solid transparent;
        border-top:50px solid transparent;
    }
    .right_triangle{
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-bottom:50px solid transparent;
        border-right: 50px solid red;
    }

效果：