Xóa khoảng cách giữa hai hình thang

Question

Vì một số lý do có khoảng cách giữa các hình thang của tôi.

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

Có cách nào để loại bỏ các không gian mà không sử dụng lợi nhuận tiêu cực?

Answer 1

Đó là vì các yếu tố vẫn giữ nguyên luồng DOM khi bạn thực hiện transform:rotate(-90deg);. Nếu bạn xóa nó, bạn sẽ thấy rằng hai div thực sự chạm vào. Bạn có thể di chuyển phần tử thứ hai để giảm khoảng cách.

#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

chênh lệch đó là có vì width và transform: rotate, nhưng bạn có thể sử dụng translateY để sửa chữa nó.

#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

Thay vì làm cho hình thang ngang và sau đó quay, chỉ cần làm cho nó theo cách bạn muốn nó.

#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

Làm điều đó mà không có sự luân phiên:

#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