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

Question

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

#trapezoid { 
 
    margin-top: 100px; 
 
\t border-bottom: 100px solid red; 
 
\t border-left: 20px solid transparent; 
 
\t border-right: 20px solid transparent; 
 
\t height: 0; 
 
\t width: 200px; 
 
    transform:rotate(90deg); 
 
    float: left; 
 
} 
 

 
#trapezoid2 { 
 
    margin-top: 100px; 
 
\t border-bottom: 100px solid red; 
 
\t border-left: 20px solid transparent; 
 
\t border-right: 20px solid transparent; 
 
\t height: 0; 
 
\t width: 200px; 
 
    transform:rotate(-90deg); 
 
    float: left; 
 
}

<div id="trapezoid2"></div> 
 
<div id="trapezoid"></div>

Есть ли способ, чтобы удалить пространство без использования отрицательного запаса?

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

Answer 2

Этот разрыв существует из-за 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>

Answer 3

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

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

Answer 4

Делают это без вращающаяся:

#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