纯css画直角三角形

最新推荐文章于 2025-06-21 09:15:59 发布

转载最新推荐文章于 2025-06-21 09:15:59 发布 · 391 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/weiqinl/p/7048205.html

所有的三角形，都是通过盒子模型来设定。
border（边框）的不同大小来决定
border-width: 边框的宽度
border-style: 边框的样式
border-color: 边框的颜色
1：2个颜色

    <!DOCTYPE html>
    <html>
    <head>
        <title>css的直角三角形</title>
        <style type='text/css'>
            .content-trigon-zhijiao {
                width: 0px;
                height: 0px;
                border-color:   red blue blue red;
                border-width: 50px 50px 50px 50px;
                border-style: solid;
            }
        </style>
    </head>
    <body>
        <div class="title-trigon-zhijiao">css的直角三角形</div>
        <div class="content-trigon-zhijiao">
            <span><i></i></span>
        </div>
    </body>
    </html>

2：