画三角形

约 204 字小于 1 分钟

2025-03-14

提问

如何用 css 画一个三角形
原理是什么？

原理

由于 CSS 对于元素的边框，其相邻的边框的连接处，采用的是均分的处理方式，我们可以利用这个特性，使用元素的边框，画一个三角形。

将元素的 display 属性设置为 block 或 inline-block；
宽高均设置为 0；
设置 border-width 为大于 1px 的值，border-style 为 solid；
设置 border-color，仅保留一条边的颜色，其他边的颜色为透明

.demo {
    display: block;
    width: 0;
    height: 0;
    border-width: 30px;
    border-style: solid;
    border-color: transparent transparent blue transparent;
}

:::: normal-demo CSS 三角形

HTML

<div class="triangle-demo"></div>

CSS

.triangle-demo {
    display: block;
    width: 0;
    height: 0;
    border-width: 30px;
    border-style: solid;
    border-color: transparent transparent cyan transparent;
}

::::

贡献者

Cuber-Wei