暂时放这些,以后遇到别的继续收录
效果图如下:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css形状</title>
<style>
.lsosceles_triangle{content:"";display:block;width:0px;height:0px;border-width:0px 100px 50px;border-style:none solid solid;border-color:transparent transparent #011629;}
.right_triangle{content:"";display:block;width:0px;height:0px;border-width:0px 0px 200px 200px;border-style:none solid solid;border-color:transparent transparent #011629;}
.right_trapezoid{content:"";display:block;width:200px;height:0px;border-width:0px 0px 70px 90px;border-style:none solid solid;border-color:transparent transparent #011629;}
.lsosceles_trapezoid{content:"";display:block;width:200px;height:0px;border-width:0px 45px 45px;border-style:none solid solid;border-color:transparent transparent #011629;}
.rotate_trapezoid{content:"";display:block;width:200px;height:0px;border-width:0px 45px 45px;border-style:none solid solid;border-color:transparent transparent #011629; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
</style>
</head>
<body>
<!--等腰三角形-->
<span class="lsosceles_triangle"></span><br>
<!--直角三角形-->
<span class="right_triangle"></span><br>
<!--直角梯形-->
<span class="right_trapezoid"></span><br>
<!--等腰梯形-->
<span class="lsosceles_trapezoid"></span><br>
<!--旋转梯形-->
<span class="rotate_trapezoid"></span>
</body>
</html>