css整理 -- 右箭头，上下箭头，三角形

.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,
.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;
}