Hello, is it possible to make such a rectangle (curved or something) on ​​CSS?

enter image description here

It turned out to be done with the help of the overlay from the top and from the bottom of the ovals (white and orange (like the block itself)), but it does not look very nice:
CSS:

#main::before{ background-color: white; content: ''; position: absolute; top: 100%; left: -54%; transform: translateX(50%)translateY(-50%); width: 104%; height: 65%; border-radius: 50%; } #main::after{ background-color: #FFC107; content: ''; position: absolute; top: -1%; left: -50%; transform: translateX(50%)translateY(-50%); width: 100%; height: 65%; border-radius: 50%; } #main{ border: 1px solid #ffc107; position: absolute; top: 50%; left: 50%; width: 50%; height: 75px; background: #ffc107; transform: translateX(-50%)translateY(-50%); }

jsfiddle

enter image description here

    2 answers 2

    Look in the direction of SVG, perhaps with the help of css you can do it, but it will turn out too perversely, most likely.

    To work with SVG you can use one of the libraries:

    and etc.

    • The fact is that I am not familiar with SVG, and I will need to manage the bend from the JS script, if I implement it through SVG, will it be possible? - Mr_Epic

    If you refine your example, you can achieve the desired

     #main::before{ background-color: white; content: ''; position: absolute; z-index: 3; top: 100%; left: -20%; width: 140%; height: 100%; margin-top: -15px; border-radius: 80%; } #main::after{ background-color: #FFC107; content: ''; position: absolute; z-index: 2; top: 5px; left: -20%;; width: 140%; height: 100%; border-radius: 80%; } #main{ position: absolute; top: 50%; left: 50%; width: 50%; height: 75px; overflow: hidden; background: #ffc107; box-shadow: inset 0 40px white; transform: translateX(-50%)translateY(-50%); }

    https://jsfiddle.net/fliginskih/oprm6tsz/