用css画一个三角形

代码如下：原理是设置宽高为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>

运行结果如图：

 

 如果打开transform:rotate(90deg);运行结果如图：

 

posted @ 2021-03-18 10:21  why_not_try  阅读(128)  评论(0)  编辑  收藏  举报