css 如何在图像中添加尖角

ttcibm8c 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(120)

我试图使一个尖锐的角落，以一个图像在CSS。你觉得我该怎么做？
示例：

我尝试使用border-radius属性来创建它，但它不适合我。

img {
  background: yellow;
  width: 200px;
  height: 200px;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
}

<img >

css

来源：https://stackoverflow.com/questions/76235571/how-to-add-a-sharp-corner-to-an-image

1条答案

按热度按时间

rqcrx0a61#

CSS mask可以近似于此：

img {
  --g: #000 100%,#0000 101%;
  -webkit-mask:
    radial-gradient(130% 100% at 130% 100%,var(--g)) top left/ 50% 80%,
    radial-gradient(130% 100% at -30% 100%,var(--g)) top right/50% 80%,
    linear-gradient(#000 0 0) bottom/100% 20%;
  -webkit-mask-repeat: no-repeat;
}

<img src="https://picsum.photos/id/1069/300/250">

赞(0）回复(0）举报 2023-05-19

我来回答

css 如何在图像中添加尖角

1条答案

相关问题

热门标签

最新问答