как сделать линию spaciel в css?

Question

я пытаюсь сделать это в css http://prntscr.com/l19jl9

, но я только добавляю http://prntscr.com/l19juk https://prnt.sc/l19itx

этот мой код:

    .halfCircleLeft{
     height:90px;
     width:45px;
     border-radius: 90px 0 0 90px;
     background:green;
     }

как я могу это сделать?

Answer 1

Это не совсем та форма, которая у вас есть на изображении, но она проста и, вероятно, достаточно близка:

#box {
  border:1px solid #000;
  border-radius: 10px 0px 0px 10px / 50% 0% 0% 50%;
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

<div id="box"></div>

Приведенное выше решение использует эллиптический радиус границы, который задается с помощью косой черты (/).

---

Другой подход здесьгораздо ближе к исходному изображению, но для его реализации требуется значительно больше кода, и его тоже немного ломче:

#wrapper {
  overflow:  hidden;
  width: 200px;
}

#box::before {
  position:  relative;
  display: block;
  content: "";
  margin-left: -20px;
  background: #ccc;
  height: 400px;
  width: 400px;
  margin-top: -75%;
  border-radius: 50%;
  z-index: -10;
}

#box {
  float: left;
  position: relative;
  margin-left: 20px;
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

#content {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
}

<div id="wrapper">
  <div id="box">
   <div id="content">
   </div>
  </div>
</div>

В этом подходе используется большой круг, который затем обрезается на #wrapper делением с использованием overflow: hidden;.#content div не является строго необходимым для фигуры, но может упростить размещение чего-либо внутри коробки.

Answer 2

Вы можете установить overflow: hidden для контейнера и сделать внутренний div большим кругом, это даст вам нужный эффект.

.cont{
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 100px;
    background-color: #e5e5e5;
}

.round-back{
  top: -100px;
  left: 50px;
  position: absolute;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  background-color: red;
}

<div class="cont">
  <div class="round-back"></div>
</div>