由于某种原因,我的梯形之间存在空间。
#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>
有没有办法在不使用负边距的情况下移除空间?
答案 0 :(得分:11)
不是水平制作梯形然后旋转,而是按照你想要的方式制作。
#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>
答案 1 :(得分:9)
这是因为当您执行transform:rotate(-90deg);
时,元素仍会保留它的DOM流。如果你删除它,你会看到两个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;
}
&#13;
<div id="trapezoid2"></div>
<div id="trapezoid"></div>
&#13;
答案 2 :(得分: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;
}
答案 3 :(得分:3)
由于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;
}
&#13;
<div id="trapezoid2"></div>
<div id="trapezoid"></div>
&#13;