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> 

Answer 2

您可以通过使用常见的透明边框技巧来实现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 3

通过使用伪元素并将其倾斜，您可以实现。

如果该行最多分为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>