enter image description here

Now I have a clip-path: polygon (50% 0%, 100% 0, 100% 100%, 70% 90%, 44% 87%, 23% 91%, 0 99%, 0 0); Are there any programs or services in which you can draw this? Found two services, but both are not suitable for such a task. The first is http://www.cssplant.com/clip-path-generator . The second one is https://bennettfeely.com/clippy/ .

  • clip-path-ом will not work in EDGE && IE ... A pseudo-element is better, well, or svg - Air

1 answer 1

 .block { position: relative; width: 300px; height: 200px; background: red; } .block::after { display: block; width: 100%; height: 80px; content: ""; position: absolute; bottom: -40px; left: 0; background: white; border-radius: 50%; } 
 <div class="block"></div>

  • Not bad for this case. But the question was about SVG, when an arc on one side is not enough. For example, there is a task to crop the image in the shape of a rectangular, but slightly convex, just like here, but from all sides. How to solve such a question? - Amsterdam
  • @Amsterdam, but where in the question is something said about svg ? - Air
  • @Amsterdam, if you have a question, then ask it and I’m sure you will be helped. I didn’t quite understand the cut and a little convex ... - Air
  • just clipPath often intersects with SVG, so the solution may be associated with it. But the fact is that clippath can draw either broken lines, or ovals and circles, but with more complex streamlined figures it is no longer so easy - Amsterdam
  • I can not catch the train of thought .... - Air