css整理 -- 右箭頭,上下箭頭,三角形、超出省略號代替
阿新 • • 發佈:2021-06-30
原文連結:https://blog.csdn.net/Che_rish/article/details/78871662
右箭頭
.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; }
右箭頭效果:
- 上下箭頭
// 下箭頭 .down-arrow { display :inline-block; position: relative; width: 40rpx; height: 30rpx; margin-right: 20rpx; } .down-arrow::after { display: inline-block; content: " "; height: 18rpx; width: 18rpx; border-width: 0 2rpx 2rpx 0; border-color: #999999; border-style: solid; transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); transform-origin: center; transition: transform .3s; position: absolute; top: 50%; right: 10rpx; margin-top: -10rpx; } // 加上active旋轉成 上箭頭 .down-arrow.active::after { transform-origin: center; transform: rotate(-135deg); transition: transform .3s; }
- 三角形
.triangle {
display: inline-block;
position: relative;
top: 6rpx;
margin-left: 10rpx;
width: 0;
height: 0;
border: 10rpx solid transparent;
border-top-color: @colorGray2;
}
三角形效果:
- 超出省略號
line-1:超過1行就顯示省略號
line-n:超過n行就顯示省略號
.line-1, .line-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .line-1 { -webkit-line-clamp: 1; } .line-2 { -webkit-line-clamp: 2; }