CSS3 Full Width Trapezoid / Polygon with text? - css

Question

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

Answer 1

You have already good answers
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>
And now a fancy efect
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

By using pseudo elements, and skew them, you can achieve that.
This one works if the line breaks up to 3 lines, and if you need more, a media query will fix that.
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

You can achieve this effect by using the the common transparent border trick to achieve css triangles. Just instead of even borders and only one set to non-transparent you use different border sizes and two colors. I colored the right edge differently so it's easier to see what's going on.
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…</h2>