如何制作切角图像？

Question

制作带有切角的图像是否真实？

<div> 
    <img src="somepic" /> 
</div> 

Answer 1

通常情况下，如果你只是想给图像圆角，你可以声明一个border-radius（实际上没有给出图像的任何宽度的border）。

如果你明确地希望建立与截止角落的图像就像在你的问题中显示的一个，就可以实现与::after伪元素，它是透明的这种效果，具有边框，并旋转45度。

在下面的例子中有三个图像。

• 第一图像没有border，但它确实有施加的border-radius 。

• 第二个图像有一个::after伪元素，它是透明的，具有白色边框并旋转45度。

• 第三张图像与第二张图像相同，但伪元素的边框为红色，因此您可以更清晰地看到正在发生的情况以及效果如何起作用。

img { 
 
width: 100px; 
 
height: 100px; 
 
background-color:rgb(0,0,0); 
 
} 
 

 
div { 
 
display:inline-block; 
 
position:relative; 
 
width: 100px; 
 
height: 100px; 
 
margin-right:72px; 
 
} 
 

 
div:nth-of-type(1) img { 
 
border-radius: 12px; 
 
} 
 

 
div:nth-of-type(n+2)::after { 
 
content:''; 
 
display:block; 
 
position:absolute; 
 
top:-30px; 
 
left:-30px; 
 
width: 124px; 
 
height: 124px; 
 
border: 18px solid rgb(255,255,255); 
 
transform:rotate(45deg); 
 
} 
 

 
div:nth-of-type(3)::after { 
 
border: 18px solid rgb(255,0,0); 
 
}

<div><img src="http://static.pexels.com/photos/67211/field-away-summer-sky-67211.jpeg" /></div> 
 
<div><img src="http://static.pexels.com/photos/67211/field-away-summer-sky-67211.jpeg" /></div> 
 
<div><img src="http://static.pexels.com/photos/67211/field-away-summer-sky-67211.jpeg" /></div>