Ich habe ein schiefes Div mit folgendem CSS erstellt

#outer-left{
-ms-transform: skew(-30deg,0deg); /* IE 9 */
-webkit-transform:skew(-30deg,0deg); /* Chrome, Safari, Opera */
transform: skew(-30deg,0deg);
background:#333333;
width:200px;
z-index:20;
border-bottom:3px solid #2E8DEF;
padding:10px 30px 10px 75px;
font-size:20px;
color:#2E8DEF;
position:relative;
left:-50px;
}
#outer-left:after{
content:"";
display:inline-block;
position:absolute;
width:20px;
height:100%;
background:#2E8DEF;
float:right;
right:0px;
top:0px;
z-index:10;
}

#inner-left{
-ms-transform: skew(30deg,0deg); /* IE 9 */
-webkit-transform: skew(30deg,0deg); /* Chrome, Safari, Opera */
transform: skew(30deg,0deg);
display:inline-block;
}

Und verwendete zwei Divs, d. H. Das äußere Div, um den Rand zu verschieben, und das Div und das innere Div, um den Verschiebungseffekt für Text aufzuheben.

Aber ich habe den gleichen Effekt mit nur einem div in div3 erzielt

Schau dir die Geige an:http: //jsfiddle.net/5a7rhh0L

IF Ich mache dasselbe wie in Div. 3 mit mehr Text, der verzerrt wird. Nicht so bei div2 mit mehr Text und 2 divs.

Ich weiß genau, was hier passiert. Ich möchte wissen, ob DIV2 mit nur einem Div erreicht werden kann, d. H.<div id="inner-div">Context<br>Hello</div> und jetzt ohne Verwendung von zwei Divs, d. h. inneren und äußeren.