优雅地实现一个三角形

今天在日常摸鱼时，发现了一个 demo ，其中有一个优雅实现一个三角形的css技巧，记录一下。

关键代码

1
<div class="sm triangle purple"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.sm {
    --size: 1.75rem;
}

.purple {
    --color: rebeccapurple;
}

.triangle {
    aspect-ratio: 1;
    border-inline: calc(var(--size) / 2) solid transparent;
    border-block-end: calc(var(--size) / 1.25) solid var(--color);
}