css border实现三角形

最新推荐文章于 2025-06-16 00:15:47 发布

weixin_30449453

最新推荐文章于 2025-06-16 00:15:47 发布

阅读量163

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bear-blogs/p/10261917.html

本文介绍如何使用CSS边框属性创建不同方向的三角形，通过设置三个边框为透明，仅保留所需颜色的一边，实现纯CSS绘制三角形的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现过程：

正常的border

<div class="box"></div>
.box {
     background: #ddd;
     width: 100px;
     height: 100px;
     border-top: 20px solid yellow;
     border-right: 20px solid red;
     border-bottom: 20px solid black;
     border-left: 20px solid blue;
}

高度和宽度减小后的border

正常border表现为梯形，当box的高度和宽度减小至0时，border则为三角形

.box {
        background: #ddd;
        width: 0;
        border-top: 20px solid yellow;
        border-right: 20px solid red;
        border-bottom: 20px solid black;
        border-left: 20px solid blue;
}

接下通过设置其他三个border的背景为透明则可以实现三角形

.box {
        width: 0;
        border-top: 20px solid yellow;
        border-right: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid transparent;
}

.box {
        width: 0;
        border-top: 20px solid transparent;
        border-right: 20px solid red;
        border-bottom: 20px solid transparent;
        border-left: 20px solid transparent;
}

.box {
        width: 0;
        border-top: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid black;
        border-left: 20px solid transparent;
}

.box {
        width: 0;
        border-top: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid blue;
}