如何制作带角落的图像？

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>