Ajouter un fond incliné à DIV en utilisant CSS3

Question

J'ai un en-tête de page personnalisé dans un thème WordPress qui affiche simplement une image d'arrière-plan et du texte personnalisé qui est ajouté sur le dessus de l'image.

Actuellement l'en-tête ressemble à ceci:

Je voudrais ajouter une barre d'arrière-plan biaisé au texte qui est imposée au-dessus de l'image d'arrière-plan afin qu'il ressemble à ceci:

La div asymétrique donnerait des arrière-plans dégradés au texte d'en-tête et de sous-en-tête. J'essaie de créer les divs de graissage en utilisant le pseudo-sélecteur CSS ::before tag.

Mes problèmes sont que le texte est effectivement contenu dans un Container div qui définit la largeur de la div divisée.

J'essaye de faire en sorte que l'arrière-plan div de Summer Sale se rapproche du bord gauche de la fenêtre du navigateur. Cela signifierait qu'il devrait sortir du conteneur. Je voudrais faire la même chose pour le texte subheader.

Aussi, je trouve que actuellement la largeur du summer sale s'étend sur toute la largeur du div contenant comme sur la photo. Je ne suis pas après ça. Je voudrais qu'il ne couvre que la largeur du texte summer sale.

Voici mes extraits de code:

Code HTML

<div class="container"> 
    <div class="row"> 
     <div class="col span_6"> 
      <h1>Summer Sale</h1> 
      <span class="subheader">Save big on selected products</span> 
     </div> 
    </div> 
</div> 

CSS code

#page-header-bg h1::before { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
    border-radius: 6px; 
    background: rgba(0,0,0,0.4); 
    border-color: rgba(0,0,0,0.5); 
    border-right-width: 4px; 
    border-right-style: solid; 
    -webkit-transition: background .2s ease-in-out; 
    transition: background .2s ease-in-out; 
} 
#page-header-bg h1::before, #page-header-bg .subheader::before { 
    -webkit-transform: skew(20deg); 
    -ms-transform: skew(20deg); 
    transform: skew(20deg) 
} 
#page-header-bg h1::before, #page-header-bg .subheader::before { 
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,0,0,0)), color-stop(60%, rgba(0,0,0,0.35))); 
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%); 
    background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%); 
    background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%); 
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#40000000', GradientType=1); 
} 
#page-header-bg .subheader, #page-header-bg h1 { 
    position: relative 
} 
#page-header-bg .subheader::before { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: #000; 
    background: rgba(0,0,0,0.7); 
    z-index: -1; 
    padding: 0px 5px 5px 10px; 
    border-radius: 6px 
} 

Je pensais à régler la largeur de l'étiquette #page-header-bg h1::before mais je ne peux pas faire que le texte va changer et je peux; t savoir quelle est la largeur wi serai.

Toute aide serait grandement appréciée.

Answer 1

Modifier le h1-display:inline-block et width:auto il ne fonctionne pas largeur et votre :before devrait alors ajustons également en fonction de la largeur du texte

Answer 2

Je ne sais pas si vous avez apporté des modifications à votre site après charlietfl de suggestion, mais selon le code actuel dans votre site, vous n'avez pas besoin de définir le h1 à display: inline-block et width: auto parce que le h1 et le .subheader sont déjà flottants vers la gauche. (en fonction de votre dernier commentaire, il ne semble que vous avez fait.)

La raison pour laquelle l'élément de gradient asymétrique ne se développe pas à bord gauche de la fenêtre est parce que l'élément .container a obtenu padding: 0 90px ensemble (ce qui signifie, il est un padding de 90px sur la gauche et la droite). Nous pouvons facilement supprimer ou remplacer ce paramètre pour résoudre le problème, mais cela entraînerait de nombreux changements d'alignement au sein de votre page Web.D'où l'option la plus simple serait d'ajouter une position left négative (égale au rembourrage) aux h1 et .subheader éléments comme ci-dessous:

#page-header-bg .subheader, 
#page-header-bg h1 { 
    left: -90px; 
} 

Alternativement, vous pouvez également utiliser transform: translate(...) pour déplacer le h1 et .subheader à gauche par le même numéro. de pixels comme le remplissage sur .container. En général, je préférerais l'approche de positionnement car les transforms ne sont pas supportés par les anciens navigateurs mais puisque vous utilisez déjà des transformations asymétriques, l'une ou l'autre approche devrait être bonne.

#page-header-bg .subheader, 
#page-header-bg h1 { 
    transform: translate(-90px); 
} 

Je n'ai ajouté aucune démo, car il y a beaucoup de paramètres qui nécessitent d'être copiés à partir de la page Web actuelle.