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?

Improve this question
5
  • related: stackoverflow.com/q/65255101/8620333 / stackoverflow.com/q/66736331/8620333 Commented Apr 7, 2021 at 9:51
  • but those question talks about masking and svg why is that a duplicate qn ? Commented Apr 7, 2021 at 9: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 : 9elements.github.io/fancy-border-radius/#52.40.49.30--. (I am finding it's related duplicate) Commented Apr 7, 2021 at 9: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 Commented Apr 7, 2021 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 Commented Apr 7, 2021 at 10:02
Related questions
2039
How do CSS triangles work?
3007
How can I transition height: 0; to height: auto; using CSS?
2551
How do I reduce the opacity of an element's background using CSS?
Load 5 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.