等边三角行:
<html> <body> <div class="div1"> </div> </body> </html>css样式:先做成一个没有长和高的四边形:
.div1{ height:0px; width:0px; background-color: red; border-top: 100px blue solid; border-bottom: 100px red solid; border-left: 100px green solid; border-right: 100px black solid; }
再把三个边框颜色改为透明:
.div1{ width: 0px; height: 0px; border-top: 100px transparent solid; border-bottom: 100px red solid; border-left: 100px transparent solid; border-right: 100px transparent solid; }
等腰直角三角形:
<!--直角三角形-->
.div1{ width: 0px; height: 0px; border-top: 100px transparent solid; border-bottom: 100px red solid; border-left: 100px red solid; border-right: 100px transparent solid; }
如图:
<!--等边三角形-->
.div1{ width: 0px; height: 0px; border-top: 100px transparent solid; border-bottom: 150px red solid; border-left: 100px transparent solid; border-right: 100px transparent solid; }
如图:
一上是三角
<!--梯形-->
.div1{ margin-top:20px; height: 120px; width: 120px; background-color:white; border-top: 100px red solid; border-bottom: 100px green solid; border-left: 100px black solid; border-right: 100px blue solid; }
如图:
变成梯形:
.div1{ margin-top:20px; height: 120px; width: 120px; background-color:white; border-top: 100px transparent solid; border-bottom: 100px green solid; border-left: 100px transparent solid; border-right: 100px transparent solid; }
如图:等腰梯形