css倒三角怎么使用 |css 设置线条重复

.arrow {
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent transparent #fff transparent;
transform: rotate(180deg);
}

以上代码中，大家创建了一个宽度为0高度为0的盒子，并设置了边框的样式为实线;border-width分别为上右下左;border-color分别为上右下左。注意其中透明的地方要用transparent代替。这样大家就得到了一个倒三角形。

接下来大家给这个盒子设置绝对定位，可以让它在两个方向上自由移动。并将它的transform属性设置为rotate(180deg)，这样就将倒三角形旋转了180度，让它变成了倒着的箭头。

最后大家就可以在需要使用的地方，像这样调用它：

然后根据自身的需求和网页的情况，再添加上各种其他的CSS样式，比如背景颜色、边框颜色等等，就可以得到一个看起来很不错的倒三角了。