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

#css #css-shapes

#css #css-фигуры

Вопрос:

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

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

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

Ответ №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

Ответ №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>

1. @velvetInk если мы поймем трюк, это может быть очень просто 😉

2. Ты так хорош в радиальных градиентах! Мне нужно прочитать о них. Есть ли у вас какой-либо предпочтительный учебный ресурс?

3. @AndyHoffman не совсем, я обычно использую официальную спецификацию, чтобы понять различные значения и как это работает ( drafts.csswg.org/css-images-3/#radial-gradients ) затем я пытаюсь поиграть с ними, чтобы добиться разных результатов.

Ответ №3:

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