[分享]css不定宽高画三角形

CSS的作用是为Web页面增加更多的样式，使得页面更加鲜活、有趣、吸引人。CSS中最基础的样式就是控制各个元素的大小、位置和颜色。在这些基础的CSS样式中，制作三角形是比较常见的需求。但是，在绝大多数...

CSS的作用是为Web页面增加更多的样式，使得页面更加鲜活、有趣、吸引人。CSS中最基础的样式就是控制各个元素的大小、位置和颜色。在这些基础的CSS样式中，制作三角形是比较常见的需求。但是，在绝大多数情况下，三角形的边长和高度都是不定的，并且有时候三角形的边长可能还需要动态调整，这就给我们的实现带来了一些难度。

.triangle{
    position: relative;
    width: 0;
    height: 0;
}
.triangle:before{
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    border-width: 20px 40px 0 40px;
    border-style: solid;
    border-color: #f00 transparent transparent transparent;
} 

如上所示，我们可以通过上述代码来实现一个不定宽高的三角形。首先，我们先设置一个位置为相对的容器（即已知的父容器），然后定义该容器的宽高均为0，接着通过伪元素:before为该容器创建一个三角形。伪元素的content设为空，这样该三角形就没有文字内容。然后，我们通过四个不同的border-width来分别设置该三角形的高度、宽度以及斜边的长度，从而实现一个斜边朝下的三角形。其中，top和left分别为0，使得该三角形紧贴在父容器的左上角，最后，我们通过border-color来设定该三角形的颜色，同时其中的transparent表示透明，以便使三角形边框看上去是斜的，而不是直的。