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

Answer 2

这个怎么样：

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 3

我一般都喜欢纯粹的CSS形状，但我认为SVG可能会让你的生活变得更轻松，所以我开始摆弄你的小提琴。我对结果并不完全满意，但它提供了一些像动态尺寸这样的优势。

提出评论：http://jsfiddle.net/bo5k36pa/8/

如果您想使用此解决方案，我强烈建议对base64中的内联svgs进行编码，以避免兼容性和编码问题。有关详细信息，请参阅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标记的填充颜色的含义。

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

使用<use>。您可以在外部svg文件中定义<symbols>，并通过其<svg>属性在内联id中引用它们。我们仍然可以使用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 Shapes。我建议利用：before和：after伪元素，使这些奇特的附属物与你的内容框分开。

如何将梯形转向对面？

3 个答案:

说明

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