具有边框和背景色的纯CSS响应梯形

Question

So i wanted to create a responsive trapezoid where you can apply a border and a background colour to it I already created one using 3 div blocks but i cant get the border at the top of the trapezoid to stay inline when the width and height is changed So my question is either. can someone help me figure out how to keep the line at the top of the trapezoid in line with the left and right border or if anybody knows of a different solution? Here is my code....

 .trapezoid-container{ position: relative; margin-left: 100px; width: 200px; height: 200px; } .trapezoid { background: green; position: relative; position:absolute; content:""; width: 70%; height: 100%; border-top: 5px solid black; border-bottom: 5px solid black; left: 20px; } .trapezoid:before { background: green; position:absolute; content:""; width: 60%; height: 100%; left: 63%; border-right: 5px solid black; border-bottom: 5px solid black; transform: skew(20deg); } .trapezoid:after { background: green; position:absolute; content:""; width: 60%; height: 100%; left: -28%; border-left: 5px solid black; border-bottom: 5px solid black; transform: skew(-20deg); } 

 <div class="trapezoid-container"> <div class="trapezoid"> </div> </div> 

Thanks guys :)

Answer 1

A better solution found on How to draw a trapezium/trapezoid with css3? Which answers my question, thought id post it

 #container { position: relative; margin-left: 200px; width: 200px; height: 200px; } .trapezoid { position: relative; width: 30%; height: 50%; background: red; transform: perspective(2px) rotateX(1deg); border: solid 4px black; left: 20%; top: 70%; } 

 <div id="container"> <div class="trapezoid"> </div></div>