Html 如何将梯形旋转到相反方向？

我在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;
}

但是我还需要第二个梯形，将

边框底部

旋转到

边框顶部

，但是在这种情况下，文本会从实际的梯形上飞走

我做了

边框顶部

而不是

边框底部

将梯形旋转到相反方向

这是问题的全部表现

这个怎么样：

HTML（在trap2文本周围添加

span

标记）

---

我通常喜欢纯css形状，但我认为SVG可能会让您的生活更轻松，所以我开始摆弄您的小提琴。我对结果并不完全满意，但它提供了一些优势，比如动态尺寸

胡乱评论：

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

解释 其想法是使用内联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%;

backgroundimage:url（'data:image/svg+xml；utf8'）；
背景大小：100%；

组成吊架的路径可以修改，如果需要不同的角度或形状，甚至可以使用javascript动态生成。但真正令人不快的是，我们不能设置内嵌svg背景图像的样式。例如，要更改填充颜色，我们必须再次定义整个svg标记

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

使用

。您可以在外部svg文件中定义

，并通过它们的

id

属性在内联

中引用它们。我们仍然可以使用CSS为这些符号设置样式。然而，它需要在每个容器中添加相当数量的额外标记。大概是这样的：

使用CSS过滤器更改外观。/

回到CSS形状。我建议利用：before和：after伪元素将这些奇特的附件与内容框分开

---

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

同时使用

：before

和

：after

将有助于创建所需的形状。边框也是透明的，所以你不必担心背景图像被涂上颜色

#梯形{
宽度：260px；
高度：190px；
背景：红色；
左边距：45像素；
位置：相对位置；
}
#梯形：之前{
内容：''；
右边框：45px实心红色；
边框底部：190px实心透明；
位置：绝对位置；
左：-45px；
排名：0；
}
#梯形：之后{
内容：''；
左边框：45px实心红色；
边框底部：190px实心透明；
位置：绝对位置；
右：-45px；
排名：0；
}

这里有文字

对不起，我可能不太清楚，你能到小提琴那里去吗，你会得到一个问题，当我把边框从下到上转换成梯形时，div中的文本飞到了外面。迈克尔·布恩，谢谢，这很有效，我确实试过这个，但我在寻找一些东西，如果我们能做到这一点，而不增加这个绝对位置。我不确定这是否会影响反应能力。但再次感谢你，我会尝试一下。好吧，这里的问题是你把文本放在一个边框上。没有背景空间可供使用。在这两个梯形中，文本实际上位于同一位置，即上边框（）的正下方。只有边界设置发生更改。不确定是否有比绝对定位更好的方法在边框上覆盖文本。是的，这似乎很完美，我也进行了研究，但找不到任何其他方法，它正在工作。这似乎很好，但我必须首先理解svg。现在，我只知道CSS，但是你做这件事的方式非常简洁有效。我喜欢它。非常感谢这似乎是个很好的解决办法。谢谢

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

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%;