使用css在图像上添加角度

Question

如何获得我们在图片Trying to create an angle in the image which will reside inside a div element

中看到的角度

Answer 1

您可以使用::after伪元素并应用skew转换来实现此效果。

工作示例：

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>