Ich versuche, ein Div zu erstellen, das nur am oberen Rand geneigt ist und den darin enthaltenen Text nicht mit CSS verzerrt. Der Grund, warum ich möchte, dass es nur CSS ist, ist, dass es ein ansprechendes Design ist und auf Prozentsätze reagieren muss, da sich der Rest dieses Div mit der Gerätebreite ändert.

Ein Foto von dem, was ich zu erreichen versuche, ist hier:

Was ich bisher erreicht habe, ist, ein schiefes Div zu erstellen und es innerhalb des anderen Div zu positionieren und es dann mit einem negativen Rand nach oben zu ziehen. Auf diese Weise habe ich zwei Probleme gelöst. Das erste Problem ist, dass bei der kleinsten Bildschirmverkleinerung (Verkleinern der Browser-Breite) die verzerrte Teilung kleiner wird als die enthaltende Teilung, wodurch sie merkwürdig aussieht. Außerdem verdeckt dieses Div jeden Text, den ich danach hinzufüge.

Das Markup:

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

Das 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 */
}

Ich habe versucht, den Versatz auf dem Elternteil beiseite zu legen, aber dies verzerrt alle untergeordneten Elemente darin. Wenn dies ein festes Layout wäre, würde ich die absolute Positionierung verwenden, um mir zu helfen, aber da es reaktionsschnell und flexibel ist, weiß ich nicht, welchen anderen Ansatz ich wählen soll.

Ich würde es auch gerne in CSS haben, weil ich dem div andere Effekte hinzufügen möchte, wie z. B. ein äußeres Leuchten mit Box-Shadow und einen Hintergrund-Farbverlauf.

Ich kann das Design auch nicht ändern.

Jede Eingabe, wie dies erreicht werden soll, wäre großartig!