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

#html #css

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



Пытался делать таким способом, но получалось криво:



.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);
}






    

Ответы

Ответ 1

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

  




Ответ 2

Поэкспериментировать с кодом времени нет. Но советом помочь могу. Несложно догадаться
что эту фигуру можно получить за счет усеченных трех эллипсов (я их кругами изобразил).

Если хотите решать задачу математическим способом вам пригодится тригонометрия, а
в вашем случае синус или косинус.