三角形CSS样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>三角形</title>
        <style>
        .box{
            height: 0;                        
            width: 0;                        /*宽高为零*/
            border: 50px solid transparent;    /*先把所有边设为透明*/
            border-top-color: red;            /*给顶部加上颜色,就是一个向下的三角形*/
        }
        </style>
    </head>
    <body>
        <div class="box"></div>  <!-- 我是一个向下的三角形 -->
    </body>
</html>

 

向下的红色三角形

 
posted @ 2022-03-13 14:19  AVEGER  阅读(37)  评论(0)    收藏  举报