如何用CSS画一个三角形?
在CSS中,我们可以使用边框技巧来创建一个三角形。这是通过设置元素的上、右、下边框为透明,而左边框设置为所需的颜色和宽度来实现的。
以下是一个创建向上指向的三角形的CSS代码示例:
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #ff0000;
}
HTML部分:
<div class="triangle-up"></div>
这段代码会创建一个向下指向的三角形,如果你想要其他方向的三角形,你可以调整border-left
、border-right
和border-bottom
的值。例如,要创建一个向左指向的三角形,你可以将border-right
设置为透明,并将border-left
设置为实色。
评论已关闭