Удалите пространство между двумя трапециями

По какой-то причине между моими трапециями есть место.

#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>

Ответ 1

Это потому, что элементы все еще сохраняют поток DOM, когда вы делаете transform:rotate(-90deg);. Если вы удалите его, вы увидите, что на самом деле касаются два div. Вы можете переместить второй элемент, чтобы уменьшить разрыв.

#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>

Ответ 2

Вместо того, чтобы делать трапецию горизонтально, а затем вращаться, просто сделайте так, как вы этого хотите.

#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>

Ответ 3

Сделайте это без вращения:

#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

Ответ 4

Этот пробел существует из-за width и transform: rotate, но вы можете использовать translateY для его исправления.

#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>