0

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 :)

  • what about something from this topic (svg, canvas)? http://stackoverflow.com/questions/7920754/how-to-draw-a-trapezium-trapezoid-with-css3 – moped Jul 03 '16 at 08:34
  • Actually looked at this topic but missed the second answer on the page width: 30%; height: 50%; background: red; transform: perspective(2px) rotateX(1deg); margin: 50px; border: solid 4px black; Edited one of there answers and works perfect! Does the job i wanted, thanks for the reply :D –  Jul 03 '16 at 08:42
  • ideally if you have time, create an answer for your question ;) – moped Jul 03 '16 at 08:45

1 Answers1

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>
Community
  • 1
  • 1