不多說或链,直接上源碼和效果圖:
.right_arrow {
height: 20rpx;
line-height: 20rpx;
position: relative;
padding: 18rpx;
z-index: 4;
}
.sec_arrow {
margin-left: -28rpx;
z-index: 0;
}
/*箭頭的三角形 */
.right_arrow:before {
content: "";
display: block;
position: absolute;
top: 50%;
right: 0;
width: 0;
height: 0;
border: 15rpx solid;
margin-top: -15rpx;
border-color: transparent transparent transparent rgba(255, 140, 0, 1);
}
/*背景色三角形*/
.right_arrow:after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 4rpx;
width: 0;
height: 0;
border: 15rpx solid;
margin-top: -15rpx;
border-color: transparent transparent transparent rgba(255, 255, 255, 1);
}
效果圖:
向右的兩個箭頭令宿。具體使用:
同時修改這四個數(shù)值改變大邢铺浴(箭頭的長度)旬蟋。
修改這個可以控制箭頭的寬度倾贰。
然后顏色和方向不用我多說了吧匆浙。