作者:书友16941424_529 | 来源:互联网 | 2023-09-05 09:22
三角形.graph:before{content:"";display:block;height:0;width:0px;border-width:0px30px45px145px;border-style:nonesolidsolid;border-color:transparenttransparentred;}等腰三
三角形
.graph:before{ content: ""; display: block; height: 0; 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:0; height:0; border-width:0px 300px 100px; border-style:none solid solid; border-color:transparent transparent red; }
直角三角形
.graph:before{ content:""; display:block; width:0; height:0; 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:0;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:0;left:-10px;width:200px;}
等腰梯形旋转
.promotion-contain2 {
content:"";
display:block;
height:0;
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;
}