css画梯形

使用html+css画出梯形

<style type="text/css">
    .box {
        position: relative;
        margin: 50px;
        height: 100px;
    }
    .a1,.a2 {
        width: 15px;
        height: 50px;
        position: absolute;
        background: #ccff66;
        display: inline-block;
    }
    .a3,.a4 {
        width: 50px;
        height: 15px;
        position: absolute;
        background: #ccff66;
        display: inline-block;
    }
    .a1 {
        transform: perspective(14px) rotateY(25deg);
        left: 0;
        top: 0;
    }
    .a2 {
        transform: perspective(14px) rotateY(-25deg);
        left: 65px;
        top: 0;
    }
    .a3 {
        transform: perspective(14px) rotateX(-25deg);
        left: 15px;
        top: -15px;
    }
    .a4 {
        transform: perspective(14px) rotateX(25deg);
        left: 15px;
        top: 50px
    }
</style>

<div class="box">
    <a class="a1"></a>
    <a class="a2"></a>
    <a class="a3"></a>
    <a class="a4"></a>
</div>

效果如下