Incliner le haut d'une div en utilisant css sans biaiser le texte

Je suis en train de créer une div qui s'incline seulement par le haut, et de ne pas déformer le texte à l'intérieur, à l'aide de CSS.
La raison pour laquelle j'aimerais que ce soit CSS-seulement parce que c'est une conception sensible et doit répondre à des pourcentages, comme le reste de cette div fléchit que l'appareil largeur changements.

Une photo de ce que je suis en train d'accomplir, c'est ici:

Incliner le haut d'une div en utilisant css sans biaiser le texte

Ce que j'ai obtenu jusqu'à présent est de créer un biaisée de la vrd et les placer dans l'autre div, puis utilisez une marge négative pour le tirer vers le haut. Il y a deux problèmes avec cette façon que je l'ai fait. Le premier problème est que sur le petit écran de retrait (faites votre navigateur largeur vraiment petite), le biaisée div devient plus petit que le div contenant en lui donnant un aspect étrange. Aussi, cette div est de couvrir tout le texte, je suis en ajoutant après.

Le balisage:

<aside>
                <div id="skew"></div><!-- #skew -->
                <h3 id="refer">Refer Your Friends</h3>
</aside>

Le CSS:

   #skew {
background:#00328b;
width:103%;
height:66px;
border-radius:8px;
margin-top:-47px;
margin-left:-1.2%;
  -webkit-transform: skewY(-5.5deg); 
 -moz-transform: skewY(-5.5deg); 
  -ms-transform: skewY(-5.5deg); 
   -o-transform: skewY(-5.5deg); 
      transform: skewY(-5.5deg); 
}

.main aside {
color: white;
padding: 20px 10px;
margin-top:120px;
border-radius:8px;
background: rgb(0,51,141); /* Old browsers */
}

J'ai essayé à l'aide de l'inclinaison sur le parent de côté, mais cela biaise tous les éléments enfants. Si c'est une disposition fixe, je voudrais utiliser le positionnement absolu pour m'aider, mais depuis qu'il est à l'écoute et s'assouplit, je ne sais pas quoi d'autres de l'approche à prendre.

Je voudrais aussi, pour être en CSS car j'ai d'autres effets à ajouter à la div, comme une lueur externe à l'aide de box-shadow, et un dégradé d'arrière-plan.

Je ne peux pas changer le design.

Des commentaires sur la façon d'accomplir ce serait génial!

source d'informationauteur codeadventurer

  1. 26

    Inclinaison de la boîte d'une seule façon, et de son contenu à l'autre:

    <aside class="skew-neg">
    <div class="skew-pos">
        <p>Hello World.</p>
        <p>@jonathansampson.</p>
        <p>This box is skewed.</p>
        <p>In supported browsers.</p>
    </div>
</aside>
    /* Skew the container one way */
.skew-neg {
    -webkit-transform: skewY(-5deg);
    -moz-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    -o-transform: skewY(-5deg);
    transform: skewY(-5deg);
}

/* And the child another way */
.skew-pos {
    -webkit-transform: skewY(5deg);
    -moz-transform: skewY(5deg);
    -ms-transform: skewY(5deg);
    -o-transform: skewY(5deg);
    transform: skewY(5deg);
}

    Qui résultats dans quelque chose de semblable à la suivante:

    Incliner le haut d'une div en utilisant css sans biaiser le texte

    Démo: http://jsfiddle.net/Q7dKT/191/