css画项目里常用的多边形（三角形、梯形）

最新推荐文章于 2024-08-02 17:02:19 发布

辣姐什么鬼

最新推荐文章于 2024-08-02 17:02:19 发布

阅读量2.6k

点赞数 1

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/liona_koukou/article/details/78716702

版权

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

暂时放这些，以后遇到别的继续收录

效果图如下：

代码：

<!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>