如何用CSS 画一个三角形？

王小婷

发布于 2025-05-19 20:29:52

7300

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

这里新创建了一个专题，为自己之后的跳槽做准备，每天给自己一个小时的时间去看网上的一些面试题，并且将这些面试题的答案加上自己思考以及动手时间的内容整理成笔记，记录下来。尤其是在下班之后没有事情做的时候，不要想着去玩游戏，而是花一点点的时间去浏览一下这两年前端市场里面出现的一些知识点吧~~

今天记录一个简单的问题吧如何用CSS 画一个三角形？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>     
          .triangle {
            width: 0px;
            height: 0px;
            border-color: transparent transparent red transparent;
            border-width: 50px 50px 50px 50px;
            border-style: solid;
          }
        </style>
    </head>
    <body>
       <div class="triangle"></div>      
    </body>
</html>

效果如同下图所示~~