三角形

.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; }

轉載于:https://www.cnblogs.com/wcf52web/p/5608272.html

總結

以上是生活随笔為你收集整理的CSS 实现三角形、梯形、等腰梯形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。