CSS画出三角形（利用Border）

最新推荐文章于 2025-03-24 00:59:30 发布

weixin_30781775

最新推荐文章于 2025-03-24 00:59:30 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ruoh3kou/p/9994534.html

本文详细介绍了如何使用CSS的border属性来绘制各种三角形。通过调整border的宽度、颜色及透明度，可以轻松创建不同方向的三角形图案，这对于网页设计和布局提供了灵活的视觉效果。

画出三角形的原理是调整border（边框）的四个方向的宽度，线条样式以及颜色。

如果你将宽度调的足够大，改变不同方向的颜色，你就可以发现盒模型的border是四个梯形一样的线条。

        div{
            width: 200px;
            height: 100px;
            border-left: 50px solid yellow;
            border-right: 50px solid blue;
            border-top: 50px solid red;
            border-bottom: 50px solid black;
        }

这个时候如果将盒模型内部的height，width调为0px，根据颜色（transparent）组合成不同的三角形。

        div{
            width: 0px;
            height: 0px;
            border-left: 50px solid yellow;
            border-right: 50px solid blue;
            border-top: 50px solid red;
            border-bottom: 50px solid black;
        }