1、关闭按钮
.close {
width: 30px;
height: 30px;
/*方便相对于父元素进行定位*/
position: absolute;
top: 10px;
right: 10px;
//border: 1px solid greenyellow;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.close::before,
.close::after{
content: "";
height: 30px;
width: 2px;
background: #999;
}
.close::before{
transform: rotate(45deg); /*进行旋转*/
//width: 5px;
margin-left:-5px;
}
.close::after{
transform: rotate(-45deg);
margin-right:-5px;
}
2、箭头
.more{
font-size: 24rpx;
color: #A0A0A0;
position: relative;
margin-left: auto;
display: flex;
align-items: center;
&::after {
content: '';
display: block;
width: 12rpx;
height: 12rpx;
margin-left: 4rpx;
border-right: 1px solid #A0A0A0;
border-top: 1px solid #A0A0A0;
transform: rotate(45deg);
}
}
3、三角形
.bottom-warning {
position: relative;
top: 2rpx;
left: 0rpx;
width: 100%;
height: 56rpx;
line-height: 56rpx;
background: #f5b191 !important;
padding-left: 30rpx;
color: #fff;
font-size: 24rpx;
z-index: 99;
&:before {
content: "";
display: block;
position: absolute;
left: 30rpx;
top: -18rpx;
border-bottom: solid 24rpx #f5b191;
border-right: solid 20rpx transparent;
border-left: solid 20rpx transparent;
z-index: 2;
}
}