三角形
使用纯CSS创建一个三角形形状。
- 使用三个边框创建一个三角形形状。
- 所有边框的
border-width
应该相同(20px
)。 - 三角形指向的相对边(即如果三角形指向下方,则为顶部)应具有所需的
border-color
。相邻的边(即左边和右边)应具有border-color
为transparent
。 - 改变
border-width
的值将改变三角形的比例。
<div class="triangle"></div>
.triangle {
width: 0;
height: 0;
border-top: 20px solid #9C27B0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}