Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

enter image description hereimage Is it possible to add the bottom curved using HTML CSS so we don't ned to crop the image like this? The main purpose of this is to allow image curved automatically like that, I tried to add border-radius but it won't work. Any help?

I think we need to use the SVG? I am not sure.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
552 views
Welcome To Ask or Share your Answers For Others

1 Answer

Depending on your browser support requirements you could use clip-path and circle.

.clip {
  display: inline-block;
  clip-path: circle(100% at 50% -50%);
}
<div class="clip">
  <img src="https://placehold.it/500x350" alt="">
</div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...