两个梯形之间如何去除空格

Question

由于某些原因，我的梯形之间有空隙。

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

有没有一种方法可以在不使用负 margin 的情况下去除空格？

- kulan

Answer 1

不要先水平制作梯形再旋转，直接按照所需方式制作即可。

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

- Cameron

Answer 2

这是因为使用transform:rotate(-90deg);旋转元素时，元素仍然保留其DOM流。如果你将其移除，你会发现两个

实际上是相接触的。您可以移动第二个元素以减小间隙。

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

- Justinas

---

140px 是从哪里来的？ - kulan

Answer 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

- Johannes

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

- Nenad Vracar

---

70px 是从哪里来的？ - kulan

间隙大约为140像素，我认为这是由于400 - (140 + 140) = 120所导致的，但是当它转换时，会产生大约140的间隙，但我不确定。 - Nenad Vracar