CSS 提供了许多方法来创建三角形,其中最常用的方法是使用 pseudo 元素来创建三角形的形状。在这个例子里,我们会使用伪元素 :after 或 :before 来创建三角形。
.triangle { width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #007bff transparent; }
在这个例子中,我们为元素设置宽度和高度为0。然后,我们设置了 border-style 属性,它描述了边框的样式。 在这里,我们只想在下面添加一条边框线,并且这条边框线需要是实线的,所以我们设置为 solid
。在下面的边框中,我们只想让三角形显示,所以我们在另外的边框中设置了 transparent
。
最后,我们设置了边框宽度,用于定义三角形的大小和形状,同时使用 border-color
属性为三角形添加实际的颜色。 在这个例子中,我们使用 #007bff 作为三角形的颜色。
通过这种方式,我们可以通过使用伪元素来创建带有颜色和大小的三角形。尝试使用这种方式来构建其他形状,例如梯形,星形等等。