详解css绘制三角形

1.首先画一个div，给固定宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Trangle</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<h3>三角形</h3>
<div>
</div>
</body>
</html>

2.给div加上边框顺序为上，右，下，左

div{
            width: 100px;
            height: 100px;
            background-color: red;
            border-top:50px solid mediumpurple;
            border-right: 50px solid blue;
            border-bottom: 50px solid green;
            border-left: 50px solid saddlebrown;
        }

3.去掉div的宽度和高度

div{
            width: 0px;
            height: 0px;
            background-color: red;
            border-top:50px solid mediumpurple;
            border-right: 50px solid blue;
            border-bottom: 50px solid green;
            border-left: 50px solid saddlebrown;
        }

4.简化代码

 div{
            width: 0px;
            height: 0px;

            border-width: 50px 50px 50px 50px;
            border-color: red transparent;
            border-style: solid;
        }

5.最后把下边框去掉

div{
            width: 0px;
            height: 0px;

            border-width: 50px 50px 0px 50px;
            border-color: red transparent;
            border-style: solid;
        }

来源：https://www.cnblogs.com/zhangzhaoyong/p/5926470.html

标签

css三角形

border

css

Solid

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!