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

Question

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

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

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

你已经有了很好的答案

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

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

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>