enter image description here

People can draw on CSS element which is a red frame?

  • white rectangle or what?))) - Sergey V.
  • :)) No, I marked a white hump like a “hump” which should be drawn - Sergiy mk
  • one
    but, I understood how, xs, but next time, let's take adequate pictures, for example, for me, for reading SC, the contrast on the monitor is almost zero and the block is the same color as the background .... and, therefore, no bend is visible. I think that bending with at least a bunch of code will have to be done on pseudo-elements, I would make a picture with a slight simplification and pry the hands of the designer! and owners of tablets and smartphones will support me, because all these trinkets disastrously inhibit the opening of pages on the mobile. devices ... right up to closing a tab and going to a competitor's site! - Sergey V.
  • @SergeyW., Well, designers do not need to tear off their hands, what's the problem of using just one path tag in svg?) And CSS is not so difficult to do this - Arthur
  • one
    @Arthur And how exactly can this be done in pure CSS? You can only add a clip-path with url , where the value of the path identifier with SVG is indicated, but then the sense of using CSS is lost. How can CSS make curved lines? The way to throw a bunch of elements with border-radius not sure what the best idea is. - Vadim Ovchinnikov

1 answer 1

Not the best option on CSS :
PS I recommend using SVG

 :root { --size: 16.875rem; } .block { position: relative; width: var(--size); height: var(--size); background-color: lightgray; border-radius: 1rem 1rem 0 0; } .block::before, .block::after { content: ''; position: absolute; bottom: -1rem; width: 5.2rem; height: 1.5rem; background-color: inherit; z-index: -1; } .block::before { left: 0; border-radius: 0 0 100% 0; } .block::after { right: 0; border-radius: 0 0 0 100%; } .ellipse { position: absolute; bottom: -3rem; left: 50%; width: 8em; height: 4rem; border-radius: 50%; background-color: white; transform: translateX(-50%); } 
 <div class="block"> <div class="ellipse"></div> </div>