段落に適用されるスキュープロパティ

Question

私はスキューを使用していますが、変換はスキューボックス内のすべてのコンテンツにも適用されます。段落はイタリック体で表示されています。私は内部のコンテンツに影響を与えずにボックスを歪曲するにはどうすればよい http://codepen.io/Sidney-Dev/pen/RGXVpb

.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>

？

希望することができます。

Answer 1

-15degに偏っています。 "unskew" に

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

だけ内側のコンテンツを：ちょうどこのようなあなたの.inner-containerに15degを追加します。

.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>

Answer 2

これは `skew`を使用せずに行うことができますpタグに

.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>