CSS画三角形

原创已于 2025-03-24 18:13:45 修改 · 426 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #画三角形

于 2025-03-24 00:59:30 首次发布

前端同时被 2 个专栏收录

340 篇文章

订阅专栏

CSS

17 篇文章

订阅专栏

CSS画三角形

1.实心三角形
2.空心三角形
3.扩展:扇形

1.实心三角形

四个边框，让三个边框透明，一个边框不透明，width，height都为0。

ps:透明部分占据部分高度(需要去掉)

.border {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-left-width: 50px;
    border-right-width: 50px;
    border-top-width: 0px;
    border-bottom-width: 50px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #d9534f;
    position: relative;
}

<div class="border"></div>

结果如下:

在这里插入图片描述

2.空心三角形

.border {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-left-width: 50px;
    border-right-width: 50px;
    border-top-width: 0px;
    border-bottom-width: 50px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #d9534f;
    position: relative;
}
.border::after {
    content: '';
    border-style: solid;
    border-left-width: 48px;
    border-right-width: 48px;
    border-top-width: 0px;
    border-bottom-width: 48px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #ffffff;
    position: absolute;
    top: 1px;
    left: -48px;
}

结果如下:

在这里插入图片描述

3.扩展:扇形

扇形就是在三角形的基础上增加一个圆角。

.border {
            width: 0px;
            height: 0px;
            border-radius: 100%;
            border-style: solid;
            border-left-width: 50px;
            border-right-width: 50px;
            border-top-width: 0px;
            border-bottom-width: 50px;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: #d9534f;
            position: relative;
}