Skew-Eigenschaft gilt für Absatz

Ich verwende Skew, aber die Transformation gilt auch für den gesamten Inhalt in der verzerrten Box, wie Sie in meinem Stift sehen können. Der Absatz sieht kursiv aus. http://codepen.io/Sidney-Dev/pen/RGXVpb Skew-Eigenschaft gilt für Absatz

.services { 
 
    display: flex; 
 
    overflow: hidden; 
 
} 
 
.left { 
 
    background-color: black; 
 
    height: 250px; 
 
    width: 60%; 
 
    margin-left: -50px; 
 
} 
 
.right { 
 
    background-color: green; 
 
    width: 50%; 
 
    margin-right: -500px 
 
} 
 
.skew { 
 
    transform: skew(-15deg); 
 
} 
 
p { 
 
    color: white; 
 
}

<section class="services"> 
 
    <div class="left skew"> 
 
    <div class="inner-container"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro praesentium deserunt fugiat, qui est delectus vel eligendi totam quidem amet laudantium harum, saepe voluptates voluptatibus. Aliquam ea, totam nulla magni.</p> 
 
    </div> 
 
    </div> 
 
    <div class="right skew"> 
 
    </div> 
 
</section>

Wie kann ich die Box schräg, ohne den Inhalt innen zu beeinflussen?

Hope you

Quelle

2016-11-01 Ragmah

Dieses Add ohne 'skew' getan werden kann. Verwenden Sie 'linear-gradient' für Eltern. [** Fiddle **] (https://jsfiddle.net/9Lesw5tk/) –

Ich mag eigentlich die Idee des linearen Gradienten. Aber ich sehe, dass der Absatz überläuft, wenn ich das Fenster verkleinere. Also wie kann ich den Absatz in diesem Fall jederzeit im schwarzen Container behalten? – Ragmah

auch .. Ich sah die Linie, die die Boxen trennt (der in der Mitte) sieht nicht gerade aus ... stattdessen sieht es gezackt aus. – Ragmah

Sie schräg von -15deg helfen können. Fügen Sie einfach 15deg zu Ihrem .inner-container wie folgt aus:

.skew .inner-container { 
    transform: skew(15deg); 
}

auf "unskew" nur den inneren Gehalt.

.services { 
 
    display: flex; 
 
    overflow: hidden; 
 
} 
 
.left { 
 
    background-color: black; 
 
    height: 250px; 
 
    width: 60%; 
 
    margin-left: -50px; 
 
} 
 
.right { 
 
    background-color: green; 
 
    width: 50%; 
 
    margin-right: -500px 
 
} 
 
.skew { 
 
    transform: skew(-15deg); 
 
} 
 
.skew .inner-container { 
 
    transform: skew(15deg); 
 
} 
 
p { 
 
    color: white; 
 
}

<section class="services"> 
 
    <div class="left skew"> 
 
    <div class="inner-container"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro praesentium deserunt fugiat, qui est delectus vel eligendi totam quidem amet laudantium harum, saepe voluptates voluptatibus. Aliquam ea, totam nulla magni.</p> 
 
    </div> 
 
    </div> 
 
    <div class="right skew"> 
 
    </div> 
 
</section>

Quelle

2016-11-01 08:49:28 andreas

Schätzen Sie die Antwort mit Erklärung begleitet. – Ragmah

Danke, froh, dass ich helfen konnte. – andreas

Hoffe, dass es Ihnen nichts ausmacht, die Antwort von @Muhammad Usman 17 https://jsfiddle.net/9Lesw5tk/ Die Linie in der Mitte (zwischen der schwarzen Box und dem grünen) sieht ein wenig gezackt. Ich habe das Snippet verwendet, das Sie gesendet haben, aber es tut auch das gleiche – Ragmah

skew(15deg) zu p-Tag

.services{ 
 
    display: flex; 
 
    overflow:hidden; 
 
} 
 
.left{ 
 
    background-color: black; 
 
    height: 250px; 
 
    width: 60%; 
 
    margin-left: -50px; 
 
} 
 
.right{ 
 
    background-color: green; 
 
    width: 50%; 
 
    margin-right: -500px 
 
} 
 

 
.skew{ 
 
    transform: skew(-15deg); 
 
} 
 

 
p{ 
 
    color: white; 
 
    transform: skew(15deg); 
 
}

<section class="services"> 
 
<div class="left skew"> 
 
    <div class="inner-container"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro praesentium deserunt fugiat, qui est delectus vel eligendi totam quidem amet laudantium harum, saepe voluptates voluptatibus. Aliquam ea, totam nulla magni.</p> 
 
    </div> 
 
</div> 
 
<div class="right skew">  
 
</div> 
 
</section>

Quelle

2016-11-01 08:50:21

Wie ich in den Kommentaren zu den anderen Antworten hinzugefügt habe..die schiefe Linie sieht ein wenig gezackt aus..Wie kann ich das herum bekommen? – Ragmah

Skew-Eigenschaft gilt für Absatz

Antwort

Verwandte Themen