CSS3 pleine largeur trapèze/polygone avec texte?

Question

J'essaye de refaire un site client qui n'est actuellement pas réactif et sur le site, elle a de longues images qui sont trapézoïdes avec du texte à l'intérieur. Bien sûr, sur les appareils, vous pouvez à peine le lire.

Je suis en train de le transformer en formes en utilisant CSS. Je ai essayé un tas d'exemples, mais rien ne fonctionne pour le moment. Je pense que la différence est que les exemples semblent utiliser des nombres de largeur durs au lieu de 100% pour la largeur du fluide. J'ai un stylo ici: https://codepen.io/anon/pen/KmgoqE et voici le code que je joue avec que je poste ce (encore jouer, bien sûr):

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

Vous avez déjà de bonnes réponses

Pour donner un autre essai. J'ai choisi de réparer votre tentative actuelle.

Fondamentalement, le problème est que l'arrière-plan doit être sur le pseudo plutôt que sur la 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>

Et maintenant un fantaisie 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

Vous pouvez obtenir cet effet en utilisant le l'affaire de frontière transparente commune pour atteindre css triangles. Juste au lieu de même frontières et seulement un ensemble à non transparent vous utilisez différentes tailles de frontières et deux couleurs. J'ai coloré le bord droit différemment, donc il est plus facile de voir ce qui se passe.

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

En utilisant des éléments pseudo, et les biaiser, vous pouvez y parvenir.

Celui-ci fonctionne si la ligne se décompose jusqu'à 3 lignes, et si vous en avez besoin de plus, une requête média corrigera cela.

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>