CSS 实现三角形、梯形、等腰梯形

三角形

 .graph:before{ content: ""; display: block; height:; width: 0px; border-width: 0px 30px 45px 145px; border-style: none solid solid; border-color: transparent transparent red; }

等腰三角形（只用修改border-width属性值就可以了）

.graph:before{ content:""; display:block; width:; height:; border-width:0px 300px 100px; border-style:none solid solid; border-color:transparent transparent red; }

直角三角形

.graph:before{ content:""; display:block; width:; height:; border-width:0px 0px 200px 200px; border-style:none solid solid; border-color:transparent transparent red; }

梯形

.graph2:before{border-color:transparent transparent red;border-style:none solid solid;border-width:0 20px 60px 145px;content:"";display:block;height:;left:-10px;width:200px;}

等腰梯形

.graph2:before{border-color:transparent transparent red;border-style:none solid solid;border-width:0 45px 45px;content:"";display:block;height:;left:-10px;width:200px;}

等腰梯形旋转

.promotion-contain2 {

    content:"";

    display:block;

    height:;

    border-width:0px 15px 15px;

    border-style:none solid solid;

    border-color:transparent transparent red;

    position:absolute;

    -moz-transform:rotate(-45deg);/*FF浏览器*/

    -webkit-transform:rotate(-45deg);/*chrome浏览器*/

    -o-transform:rotate(-45deg);/*oprea浏览器*/

    -ms-transform:rotate(-45deg);/*IE浏览器*/

    left:-10px;

    top:17px;

    width:40px;

}