divの端に角度を追加

Question

divの左端に角度を設定しようとしています。私はイメージでこれを行うことができますが、可能であればCSSで直接達成することになります。 1

Answer 1

body { 
 
background-color: rgb(191, 191, 191); 
 
} 
 

 
div { 
 
position: relative; 
 
width: 300px; 
 
height: 180px; 
 
background-color: rgb(255, 255, 255); 
 
border: 12px solid rgba(0, 0, 0, 0.6); 
 
} 
 

 
img { 
 
display: block; 
 
float: left; 
 
width: 160px; 
 
height: 180px; 
 
} 
 

 
div::after { 
 
content: ''; 
 
display: block; 
 
position: absolute; 
 
top: 0; 
 
right: 100px; 
 
z-index: 0; 
 
width: 80px; 
 
height: 180px; 
 
background-color: rgb(255, 255, 255); 
 
transform: skew(-20deg); 
 
} 
 

 
div p { 
 
position: relative; 
 
z-index: 12; 
 
margin-left: 156px; 
 
}

<div> 
 
<img src="http://placekitten.com/g/160/180" alt="Kitten" /> 
 
<p>More div content...</p> 
 
<p>More div content...</p> 
 
<p>More div content...</p> 
 
<p>More div content...</p> 
 
</div>

Answer 2

あなたはいつものように表示されるテキストのために回転させて、バックグラウンドと1つのDIVのために1つのDIVを使用することができます - ここで

は一例です。