如何将梯形转向对面？

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 梯形的所有不同可能方法。

• 响应式 CSS 梯形形状