For some reason there's space between my trapezoids.
#trapezoid {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform:rotate(90deg);
float: left;
}
#trapezoid2 {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform:rotate(-90deg);
float: left;
}
<div id="trapezoid2"></div>
<div id="trapezoid"></div>
Is there a way to remove the space without using negative margin?
Instead of making the trapezoid horizontally and then rotating, just make it the way you want it.
#trapezoid {
margin-top:20px;
border-left:100px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
height: 200px;
float: left;
}
#trapezoid2 {
margin-top:20px;
border-right:100px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
height: 200px;
float: left;
}
<div id="trapezoid2"></div>
<div id="trapezoid"></div>
It's because elements still keep it's DOM flow when you do transform:rotate(-90deg);
. If you remove it, you will see that two divs actually touches. You can move second element to reduce gap.
#trapezoid {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform: rotate(90deg);
float: left;
/* Added code */
position: relative;
right: 140px;
}
#trapezoid2 {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform: rotate(-90deg);
float: left;
}
<div id="trapezoid2"></div>
<div id="trapezoid"></div>
Do it without the rotating:
#trapezoid {
border-left: 100px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
height: 200px;
width: 0px;
float: left;
}
#trapezoid2 {
border-right: 100px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
height: 200px;
width: 0px;
float: left;
}
http://codepen.io/anon/pen/Wxzdrv
That gap is there because of width
and transform: rotate
, but you can use translateY
to fix it.
#trapezoid {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform: rotate(90deg) translateY(70px);
float: left;
}
#trapezoid2 {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform: rotate(-90deg) translateY(70px);
float: left;
}
<div id="trapezoid2"></div>
<div id="trapezoid"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With