Как сверстать элемент полукруга?

Собственно нужно сверстать вот такой элемент:

Пытался делать таким способом, но получалось криво:
.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); }

Ответ

#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; }