CSS三角和梯形

等边三角行：

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

如图：

一上是三角

扫描二维码关注公众号，回复： 1628847 查看本文章

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

如图：等腰梯形

猜你喜欢