Как создать линию с кривой в середине в CSS

Question

Мне нужно создать линию в чистом CSS с ямочкой посередине. Является ли это возможным? Если да, то как я могу это сделать?

Правила CSS, с которыми я знаком, делают div полукруглым или изменяют границу элемента.

Например: border-radius или perspective или border-top-radius ...

* +1012 *

Answer 1

Вот мой пример использования абсолютно позиционированного псевдоконтента и относительного контейнера.Я создаю овальную форму в содержимом ::after и скрываю верхнюю половину, используя overflow: hidden.

.thing {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.thing::before,
.thing::after {
  content: '';
  z-index: 1;  
  position: absolute;
}

.thing::before {
  border-top: 2px solid black;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;  
}

.thing::after {
  border-radius: 60%;
  left: 20px;
  right: 20px;
  height: 300px;
  border: 2px solid black;
  top: -234px;
  background-color: white;
}

html { margin: 3em; }

<div class="thing"></div>

jsFiddle

Answer 2

Вы можете рассмотреть несколько фонов. A radial-gradient для кривой и linear-gradient для маленьких линий:

.box {
  width:300px;
  height:200px;
  background:
     linear-gradient(#000,#000) top left/70px 5px,
     linear-gradient(#000,#000) top right/70px 5px,
    
    
     radial-gradient(circle 100px, /*circle with 100px radius*/
       transparent calc(100% - 6px), #000 calc(100% - 5px), /*around 5px border*/
       #000 99%,transparent 100%)
      0 -150px; /*we move the centre of the circle by -150px to top*/
  background-repeat:no-repeat;
}

body {
  background:pink;
}

<div class="box"></div>

Вы можете добавить переменную CSS, чтобы лучше контролировать различные значения. Я рассмотрю другой синтаксис, чтобы лучше контролировать верхние строки, используя другой radial-gradient, который будет таким же, как основной, но с уменьшенным размером, поэтому мы видим только небольшую его часть и сохраняем последний цвет, чтобы он был черным наши линии.

.box {
  --b:5px; /*border*/
  --r:100px; /*radius*/
  --p:50px; /*offset from top */
  height:100px;
  background:
     radial-gradient(circle var(--r)
       at 50% calc(-1*var(--p)), 
       transparent calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)), 
       #000 100%)
      0 0/100% var(--b),
    
     radial-gradient(circle var(--r)
       at 50% calc(-1*var(--p)), 
       transparent calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)), 
       #000 99%,transparent 100%);
  background-repeat:no-repeat;
}

body {
  background:pink;
}

<div class="box"></div>

<div class="box" style="--rad:80px;--p:20px;"></div>

<div class="box" style="--rad:50px;--p:20px;--b:2px"></div>

<div class="box" style="--rad:100px;--p:70px;--b:8px"></div>

Answer 3

невозможно с border-radius, попробуйте с clip-path