css绘制 左右箭头,上下箭头,三角形 |
您所在的位置:网站首页 › html怎么加三角形小箭头 › css绘制 左右箭头,上下箭头,三角形 |
1. 左右箭头
.right-arrow {
display :inline-block;
position: relative;
width: 36rpx;
height: 36rpx;
margin-right: 20rpx;
}
.right-arrow::after {
display: inline-block;
content: " ";
height: 18rpx;
width: 18rpx;
border-width: 4rpx 4rpx 0 0;
border-color: #c7c7cc;
border-style: solid;
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: absolute;
top: 50%;
right: 6rpx;
margin-top: -9rpx;
}
// 加上active旋转成 左箭头
.right-arrow.active::after {
transform-origin: center;
transform: rotate(-135deg);
transition: transform 0.3s;
}
右箭头效果: 左箭头效果: 上下箭头效果: 三角形效果: 来源链接:blog.csdn.net/Che_rish/ar… |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |