CSS三角和梯形

最新推荐文章于 2023-12-08 16:37:00 发布

多云转晴ing

最新推荐文章于 2023-12-08 16:37:00 发布

阅读量514

点赞数

分类专栏： HTML+CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_42062727/article/details/80155790

版权

HTML+CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

等边三角行：

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

如图：等腰梯形

多云转晴ing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS三角和梯形

等边三角行：&lt;html&gt; &lt;body&gt; &lt;div class="div1"&gt; &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;css样式：先做成一个没有长和高的四边形：.div1
复制链接

扫一扫

专栏目录