css-实现倒梯形

<div class="li-no no-0">No.1</div>

.li-no {
    width: 68px;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 9px;
    font-size: 14px;
    color: #fff;
}
.li-no::before {
    position: absolute;
    content: "";
    left: 16px;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    height: 34px;
    transform: perspective(4em) rotateX(148deg); // 倒梯形实现
    background: linear-gradient(90deg, rgb(255, 59, 59) 0%, rgb(235 9 9) 100%);
}