html - 我如何将梯形反转？

Question

我在 CSS 中有一个梯形形状，但问题是我还需要相同类型的梯形将边框相反，第一个梯形 css 是这样的:

  #trapezoid1 {
    height: 0;
 width: 350px;
 border-bottom: 190px solid rgb(2, 145, 178);
 border-left: 45px solid transparent;
 border-right: 45px solid transparent;
 padding: 0 8px 0 0;
 display:block;
 position:relative;
}

但我还需要将 border-bottom 转换为 border-top 的第二个梯形，但是在这种情况下，文本会飞离实际的梯形。

我用 border-top 而不是 border-bottom 来使梯形相反。

这里是问题的完整展示.. jsfiddle

Answer 1

您最好的选择是使用伪元素，这样您就不必在文本元素上使用绝对定位。

同时使用 :before 和 :after 将有助于创建所需的形状。边框也是透明的，因此您不必担心背景图像被着色。

#trapezoid {
  width: 260px;
  height: 190px;
  background: red;
  margin-left: 45px;
  position: relative;
}
#trapezoid:before {
  content: '';
  border-right: 45px solid red;
  border-bottom: 190px solid transparent;
  position: absolute;
  left: -45px;
  top: 0;
}
#trapezoid:after {
  content: '';
  border-left: 45px solid red;
  border-bottom: 190px solid transparent;
  position: absolute;
  right: -45px;
  top: 0;
}

<div id="trapezoid">
  Text in here
</div>

您还可以引用我的一个预览答案，它很好地概述了创建 CSS 梯形的所有可能的不同方法。

• Responsive CSS Trapezoid Shape