trapezoid

by warriormole

HTML

<div style="position:absolute;width:100%;height:100%; background-color:black;padding:50px 20px;">
    <div class="trap1">
    </div>
    <div class="trap2">
    </div>
    <div class="trapezoid">
    </div>
    

</div>

CSS

.trap1{
    position:absolute;
    background-color: antiquewhite;
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px red;
    border-top-right-radius: 8px;
}
.trap1:after{
    content:' ';
    left:197px;
    top:2px;
    position:absolute;
    border-top: 19px solid transparent;
    border-right: 19px solid transparent;
    border-left: 19px solid antiquewhite;
    border-bottom: 19px solid antiquewhite;
    width:0;
    height:0;
    box-shadow: inset -1px 1px 1px red;
}

.trapezoid{
    position:absolute;
    top: 180px;
    border-bottom: 40px solid antiquewhite;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    width: 200px;
    z-index: 2;
}
.trapezoid:after{
    content:' ';
    left:0px;
    top:-4px;
    position:absolute;
    background:antiquewhite;
    border-radius:50px 50px 20px 20px;
    width:200px;
    height:10px;
    box-shadow: inset 1px 1px 1px red;
    z-index: -1;
}
/*
.trapezoid:before{
    content:' ';
    left:-184px;
    top:98px;
    position:absolute;
    background:blue;
    border-radius:80px 20px 80px 80px;
    width:318px;
    height:20px;
}


.trapezoid:after {
    content:' ';
    left:-11px;
    top:-7px;
    position:absolute;
    background:blue;
    border-radius:150px 50px 90px 0px;
    width:133px;
    height:30px;
}


*/