CSS3 全宽梯形/带文字的多边形？

Question

我正在尝试重做一个当前没有响应的客户站点，并且在整个站点中她都有很长的梯形图像，里面有文字。当然，在设备上，你几乎看不到它。

所以我尝试使用形状将它变成 CSS。尝试了一堆示例，但目前没有任何效果。我认为不同之处在于示例似乎使用硬宽度数字而不是 100% 的流体宽度。我这里有一支笔：https://codepen.io/anon/pen/KmgoqE 这是我正在玩的代码 post 这个（当然还在玩）：

h2.test-text {
  background: #000;
  color: #FFF;
  padding: 5px;
  font-size: 30px;
  line-height: 1;
  width: 100%;
  text-align: center;
  position: relative;
}

h2.test-text:before {
  content: "";
  position: absolute;
  border: none;
  top: -4%;
  bottom: -11%;
  left: -3%;
  right: -3%;
  z-index: -1;
  -webkit-transform: perspective(50em) rotateX(-30deg);
  transform: perspective(50em) rotateX(-30deg)
}

Answer 1

您可以通过使用常见的透明边框技巧来实现 css 个三角形来实现此效果。只需使用不同的边框大小和两种颜色，而不是偶数边框和只有一组设置为不透明。我对右边缘进行了不同的着色，以便更容易看出发生了什么。

h2.test-text {
  background: #bada55;
  color: #FFF;
  font-size: 30px;
  padding: 5px;
  line-height: 1;
  width: 80%;
  text-align: center;
  position: relative;
  margin:40px;
}
h2.test-text:before, h2.test-text:after {
  content:"";position:absolute;top:0;width:0;height:0;
  border-style:solid;
  border-width:20px 15px;
}
h2.test-text:before{
  left: -30px;
  border-color: #bada55 #bada55 transparent transparent;
}
h2.test-text:after {
  right: -30px;
  border-color:blue transparent transparent red;
}

<h2 class="test-text">Whatever somebody says&hellip;</h2>

Answer 2

通过使用伪元素并倾斜它们，您可以实现这一点。

如果该行最多分为 3 行，则此方法有效，如果您需要更多，媒体查询将解决此问题。

h2.test-text {
  background: #000;
  color: #FFF;
  padding: 5px;
  font-size: 30px;
  width: calc(100% - 120px);
  margin: 0 auto;
  text-align: center;
  position: relative;
}

h2.test-text:before,
h2.test-text:after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 70px;
  background: inherit;
  z-index: -1;
}

h2.test-text:before {
  left: -35px;
  transform: skewX(30deg)
}

h2.test-text:after {
  right: -35px;
  transform: skewX(-30deg)
}

h2.test-text.nr2 {
  margin-top: 20px;
  width: calc(60% - 100px);
}

<h2 class="test-text">Check out what our Clients are Saying</h2>

<h2 class="test-text nr2">Check out what our Clients are Saying</h2>

Answer 3

你已经有很好的答案

再试一次。我已选择修复您当前的尝试。

基本上问题是背景应该在伪而不是基础上

h2.test-text {
  color: #FFF;
  padding: 5px;
  font-size: 30px;
  line-height: 1;
  width: 100%;
  text-align: center;
  position: relative;
}

h2.test-text:before {
  content: "";
  position: absolute;
  border: none;
  top: -0px;
  bottom: -50%;
  left: 0px;
  right: 0px;
  z-index: -1;
  background: #000;
  transform: perspective(20em) rotateX(-45deg);
  transform-origin: top;
}

<h2 class="test-text">Check out what our Clients are Saying</h2>

现在花哨效果

h2.test-text {
  color: #FFF;
  padding: 5px;
  font-size: 30px;
  line-height: 1;
  width: 100%;
  text-align: center;
  position: relative;
  perspective: 20em;
  animation: tilt 2s infinite alternate linear;
}

h2.test-text:before {
  content: "";
  position: absolute;
  border: none;
  top: -0px;
  bottom: -50%;
  left: 0px;
  right: 0px;
  z-index: -1;
  background: #000;
  transform: rotateX(-45deg);
  transform-origin: top;
}

@keyframes tilt {
  from {perspective-origin: left}
    to {perspective-origin: right}
}

<h2 class="test-text">Check out what our Clients are Saying</h2>

CSS3 全宽梯形/带文字的多边形？

CSS3 Full Width Trapezoid / Polygon with text?

css

polygon

shape