icon css3伪类实现

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