假设我们有一个简单 div
标签:
<div class="triangle"></div>
有什么办法可以画出一个三角形?本文将介绍几种方法实现它。
使用盒模型的 border
边框即可快速创建一个三角形。
- 我们只需要使用其中的三个边框就可以创建一个三角形形状。
- 所有边框应具有相同的
border-width
。 - 三角形指向的另一侧(即,如果三角形指向下方,则为顶部)应具有所需的
border-color
。相邻边框(即左侧和右侧)的border-color
应为transparent
。 - 更改
border-width
值将更改三角形的比例。
.triangle {
width: 0;
height: 0;
border-top: 20px solid #9c27b0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
/* 简写形式 */
/* border: 20px solid transparent;
border-top-color: 20px solid plum; */
}
clip-path
属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。
我们可以使用它的 polygon
函数实现一个三角形:
.triangle {
clip-path: polygon(0 0, 100% 0, 50% 100%);
height: 20px;
width: 40px;
background-color: plum;
}
linear-gradient()
函数用于创建一个表示两种或多种颜色线性渐变的图片。
.triangle {
width: 20px;
height: 20px;
background: linear-gradient(
to bottom right,
#fff 0%,
#fff 50%,
plum 50%,
plum 100%
);
}