Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove space between two trapezoids

Tags:

html

css

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?

like image 745
kulan Avatar asked Jul 21 '16 12:07

kulan


4 Answers

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>
like image 191
Cameron Avatar answered Nov 03 '22 15:11

Cameron


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>
like image 27
Justinas Avatar answered Nov 03 '22 14:11

Justinas


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

like image 4
Johannes Avatar answered Nov 03 '22 14:11

Johannes


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>
like image 3
Nenad Vracar Avatar answered Nov 03 '22 16:11

Nenad Vracar