0

How to create fancy shape using CSS and html5 , I have a section in which I would like to create certain shape using css

Here is jsfiddle : live demo

img {
  height: 145px;
  width: 145px;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
<div class="flex-container">
  <img src="https://i.imgur.com/xSLLSKk.png" />
</div>

And here are the expected results:

enter image description here

Note: without using mask.

Unfortunately, I am not getting the same result as expected, what do I need to change here to get exactly as the image above?

The Dead Man
  • 6,258
  • 28
  • 111
  • 193
  • related: https://stackoverflow.com/q/65255101/8620333 / https://stackoverflow.com/q/66736331/8620333 – Temani Afif Apr 07 '21 at 09:51
  • but those question talks about masking and svg why is that a duplicate qn ? – The Dead Man Apr 07 '21 at 09:56
  • This is what you have to use for such shape. I will add more duplicates. In the mean time you can play with this : https://9elements.github.io/fancy-border-radius/#52.40.49.30--. (I am finding it's related duplicate) – Temani Afif Apr 07 '21 at 09:58
  • @TemaniAfif I am using that link too but I was not able to get the same result as expected that is why I asked – The Dead Man Apr 07 '21 at 10:01
  • and that's why I am giving you the other question because you won't be able to do it with with border radius. You need advanced feature. This is what mask or SVG are made for – Temani Afif Apr 07 '21 at 10:02

0 Answers0