用css画一个三角形

用户1149564

发布于 2021-03-19 17:52:58

6370

发布于 2021-03-19 17:52:58

文章被收录于专栏：Micro_awake web

代码如下：原理是设置宽高为0，只设置border-style:solid和border-width、border一个的颜色。这时得到的效果就是一个三角形，如果位置不对，可以用rotate进行角度转化。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三角形</title>
    <style>
        .triangle{
            width: 0;
            height: 0;
            border-width: 20px;
            border-style: solid;
            border-color: black transparent transparent transparent;
            /*transform: rotate(90deg);*/
        }
    </style>
</head>
<body>
    <div class="triangle">

    </div>
</body>
</html>

运行结果如图：