我如何将梯形反转？

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

这个怎么样：

HTML（在 trap2 文本周围添加 span 标签）

<div id="trapezoid1">
  Designing Something
</div>
<br/>
<div id="trapezoid2">
  <span id="trap2-text">Designing Opposite</span><!-- NEW -->
  <!-- I need the text in proper place which currently isn't -->
</div>

CSS（添加一条规则）

#trap2-text {
  position: absolute;
  top: -190px;
  left: -25px;
}

DEMO

Answer 2

我通常喜欢纯粹的 css 形状，但我认为 SVG 在这种情况下可能会让你的生活更轻松，所以我开始摆弄你的 fiddle。我对结果并不完全满意，但它提供了一些优势，例如动态大小。

Fiddle 评论：http://jsfiddle.net/bo5k36pa/8/

如果您想使用此解决方案，我强烈建议在 base64 中对您的内联 svg 进行编码以避免兼容性和编码问题。有关详细信息，请参阅 this answer。

说明

我们的想法是使用内联 svg 作为背景图像，因此它可以拉伸到任何大小的容器。

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 2" preserveAspectRatio="none"><path style="fill: rgb(2, 145, 178);" d="M 0.5 0 L 3.5 0 L 4 2 L 0 2 Z" /></svg>');
background-size: 100%;

可以修改构成梯形的路径，如果需要不同的角度或形状，甚至可以使用javascript动态生成。但真正令人失望的是，我们无法为内联 svg 背景图像设置样式。意思是例如只改变填充颜色我们必须再次定义整个 svg 标记。

避免多个内联 svg 的可能解决方案

使用<use>。您可以在外部 svg 文件中定义 <symbols> 并通过它们的 id 属性在内联 <svg> 中引用它们。我们仍然可以使用 CSS 来设置这些符号的样式。但是，它需要在每个容器中添加大量额外标记。是这样的： <svg viewBox="0 0 4 2" role="img" title="Trapez"><use xlink:href="path/to/images/shapes.svg#trapez"></use></svg>
使用 CSS 滤镜更改外观。 Example fiddle / Browser Support
返回 CSS 形状。我建议利用 :before 和 :after 伪元素来让这些花哨的附属物与您的内容框分开一点。

Answer 3

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

同时使用 :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 梯形的所有可能的方法。

我如何将梯形反转？

How do I turn the trapezoid opposite?

html

css

css-shapes

说明

避免多个内联 svg 的可能解决方案