删除两个梯形之间的空间

时间:2016-07-21 12:50:46

标签: html css

由于某种原因,我的梯形之间存在空间。

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

有没有办法在不使用负边距的情况下移除空间?

4 个答案:

答案 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实际接触。你可以移动第二个元素来减少差距。

&#13;
&#13;
#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;
&#13;
&#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;
}

http://codepen.io/anon/pen/Wxzdrv

答案 3 :(得分:3)

由于widthtransform: rotate存在差距,但您可以使用translateY来修复它。

&#13;
&#13;
#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;
&#13;
&#13;