css3 箭头左右 |前端 css 编码规范

/*方法一：使用border属性*/
.arrow{
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #000000;
}

使用border属性可以快速实现一个简单的箭头。设置箭头的宽和高都为0，然后设置上下两边的边框为透明，左边的边框为实心的颜色即可。

/*方法二：使用伪元素*/
.arrow:before{
content:"";
display:inline-block;
vertical-align: middle;
width: 10px;
height: 10px; 
margin-right: 10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #000000;
 }

使用伪元素也是实现箭头效果的常用方法。首先在目标元素上添加一个:before伪元素，然后同样设置上下两边的边框为透明，左边的边框为实心的颜色。接下来再调整伪元素的位置与大小即可。注意需要为伪元素设置display为inline-block以实现水平居中。

/*方法三：使用transform属性*/
.arrow{
width: 10px;
height: 10px;
background: #000000;
transform: rotate(-45deg);
}

使用transform属性也可以实现箭头效果。首先将目标元素的宽高设置为相等大小，然后背景色为实心颜色。接下来使用transform:rotate方法对目标元素进行旋转，这里是将其逆时针旋转45度。