CSS3全宽梯形/多边形与文本? [英] CSS3 Full Width Trapezoid / Polygon with text?

问题描述

我正在尝试重做一个当前无响应的客户端站点，并且在整个站点中，她的长图像都是梯形的，内部带有文本.当然，在设备上，您几乎看不到它.

I'm trying to redo a client site that's currently not responsive and throughout the site she has long images that are trapezoids with text inside. Of course, on devices, you can barely read it.

因此，我正在尝试使用形状将其转换为CSS.尝试了很多示例，但目前无济于事.我认为不同之处在于示例似乎使用硬宽度数字而不是100％的流体宽度.我在这里有一支笔: https://codepen.io/anon/pen/KmgoqE 和这是我发布此代码时正在使用的代码(当然，仍在播放):

So I'm trying to turn it into CSS using shapes. Tried a bunch of examples but nothing working at the moment. I think the difference is the examples seem to use hard width numbers instead of 100% for fluid width. I have a pen here: https://codepen.io/anon/pen/KmgoqE and here's the code I'm playing with as I post this (still playing, of course):

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)
}

推荐答案

您已经有了很好的答案

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

To give another try. I have opted to fix your current attempt.

基本上，问题在于背景应该在伪图片上而不是在基础上

Basically the problem is that the background should be on the pseudo instead of on the base

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全宽梯形/多边形与文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！