css3畫梯形

想實現的效果如下圖：

 

// 收起按鈕
.collapse_span {
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: 60px;
    height: 12px;
    cursor: pointer;
    &::before {
        content: "";
        position: absolute;
        top: 0; 
        right: 0; 
        bottom: 0; 
        left: 0;
        border: 1px solid rgba(12,131,242,0.5);
        transform: perspective(1em) rotateX(15deg);
    }
    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-left: 10px solid transparent;
        border-bottom: 6px solid #409EFF;
        border-top: 10px solid transparent;
        border-right: 10px solid transparent;
    }
    &:hover {
        &::before {
            background-color: rgba(12,131,242,0.5);
        }
    }
}

 

 代碼：