Actually you need to impose this element here:

enter image description here

Tried to do this way, but it turned out crooked:

.view-catalog { position: absolute; left: 0; right: 0; bottom: 0; width: 700px; height: 500px; border-radius: 100%; background: #800; clip: rect(0, 750px, 200px, 0); } 
 <div class="view-catalog"> </div>

  • Or is it easier to insert a picture and not bother? - Alexander

2 answers 2

 #container { background: pink; border: 2px solid #000; height: 180px; overflow: hidden; } .view-catalog { left:57%; top: 70px; position: relative; width: 0; } .view-catalog:before, .view-catalog:after { position: absolute; line-height:0; content:""; font-size:100pt; text-indent:30px; top: 0; width: 180px; height:300px; } .view-catalog:before { left: 0; border-radius: 150px 150px 20px 30px; -webkit-transform: rotate(69deg); -webkit-transform-origin: 0 0; transform: rotate(69deg); transform-origin: 0 0; background: radial-gradient(-50px 250px, 300px 1200px, transparent 20%, #fff 20%); background: -webkit-radial-gradient(-50px 250px, 300px 1200px, transparent 20%, #fff 20%); } .view-catalog:after { left: -275px; -webkit-transform: rotate(-69deg); -webkit-transform-origin:100% 0; transform: rotate(-69deg); transform-origin:100% 0; border-radius: 150px 150px 30px 20px; background: radial-gradient(230px 250px, 300px 1200px, transparent 20%, #fff 20%); background: -webkit-radial-gradient(230px 250px, 300px 1200px, transparent 20%, #fff 20%); line-height:550px; content:""; font-size:130pt; text-indent:-15px; } 
 <div id="container"> <div class="view-catalog"></div> </div>

    There is no time to experiment with the code. But I can help with advice. It is easy to guess that this figure can be obtained by truncated three ellipses (I depicted them in circles). enter image description here

    If you want to solve the problem in a mathematical way, trigonometry will be useful to you, and in your case, sine or cosine.