Возможна ли вогнутая граница границы?

Ответ 1

Вы можете создать впечатление вогнутой границы, используя радиальные градиенты на фоне. Например, что-то вроде этого:

#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}

Обратите внимание, что большинству браузеров для веб-браузеров по-прежнему требуются префиксы для радиальных градиентов, и если вы хотите полностью поддерживать старые браузеры, вам может понадобиться также реализовать старый синтаксис градиента.

Ответ 2

С умным использованием псевдо-классов :before и :after мы можем моделировать вогнутую форму:

#test{
    width: 100px;
    height: 300px;
    background: green;
    position: relative;
    display: inline-block;
}

#test:before{
    background: white;
    height: 300px;
    width: 30px;
    border-radius: 0 60px 60px 0 / 0 300px 300px 0;
    display: inline-block;
    content: '';
}

#test:after{
    background: white;
    height: 300px;
    width: 30px;
    border-radius: 60px 0 0 60px / 300px 0 0  300px;
    display: inline-block;
    content: '';
    position: relative;
    left: 40px;
}

#test div - простой прямоугольник. Но его элементы :before и :after являются полукруглыми вогнутыми, заполненными цветом фона (белый в этом случае).

Смотрите этот jsfiddle.

Ответ 3

Чтобы создать форму, вы можете использовать псевдоэлементы

div {
  height: 250px;
  width: 100px;
  background: tomato;
  position: relative;
  margin:0 auto;
}
div:before {
  content: "";
  height: 100%;
  width: 50%;
  position: absolute;
  background: white;
  border-radius: 50%;
  left: -25%;
  transition: all 0.8s;
}
div:after {
  content: "";
  height: 100%;
  width: 50%;
  position: absolute;
  background: white;
  border-radius: 50%;
  right: -25%;
  transition: all 0.8s;
}
div:hover:before,
div:hover:after {
  background: blue;
}

hover the shape to see how it works:
<div></div>

Ответ 4

Я предлагаю использовать border-image с масштабируемым SVG-изображением на границе.

Таким образом, вы можете иметь любую форму, которую хотите на границе; не нужно ограничиваться формами, предлагаемыми border-radius, и не нужно делать никаких умных хаков или дополнительной разметки.

Нижняя сторона заключается в том, что ни border-image, ни SVG не поддерживаются в старых браузерах (т.е. старых версиях IE). Но, конечно, border-radius тоже не так, поэтому вы не теряете много с помощью этой техники, по сравнению с гибкостью, которую вы получаете.

Ответ 5

SVG - рекомендуемый способ создания таких фигур. Он предлагает простоту и масштабируемость.

Мы можем использовать элемент пути SVG для создания фигуры, как указано выше, и заполнить ее каким-то сплошным цветом, градиентом или рисунком.

Для определения фигур в элементе path используется только один атрибут d. Этот атрибут содержит несколько коротких команд и несколько параметров, необходимых для работы этих команд.

Следующий код создаст выпуклую форму:

<path d="M 150,25
         Q 115,100 150,175
         Q 185,100 150,25" />

И следующий один создаст вогнутую форму:

<path d="M 30,25
         L 80,25
         Q 50,100 80,175
         L 30,175
         Q 60,100 30,25" />

Ниже приведено краткое описание команд path, используемых в приведенном выше коде:

• Команда
• M используется для определения начальной точки. Он появляется в начале и указывает точку, с которой должен начинаться рисование. Команда
• L используется для рисования прямых линий. Команда
• Q используется для рисования кривых.

Выходное изображение:

Рабочая демонстрация:

<svg width="300" height="200" viewBox="0 0 300 200">
  <defs>
    <linearGradient id="grad">
      <stop offset="0" stop-color="#ddd" />
      <stop offset=".5" stop-color="#fff" />
      <stop offset="1" stop-color="#ddd" />
    </linearGradient>
  </defs>
  <g stroke-width="1" stroke="#000" fill="url(#grad)">
    <path d="M30,25 L80,25 Q50,100 80,175 L30,175 Q60,100 30,25" />
    <path d="M150,25 Q115,100 150,175 Q185,100 150,25" />
  </g>
</svg>

Ответ 6

Есть несколько способов сделать вогнутую границу. И я предпочитаю использовать радиальные градиенты на заднем плане. https://jsfiddle.net/black_horse/qygmb8z9/

Образец изображения

.single-border{
  height: 50px;
  padding: 20px;
  background:-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background:-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 21px), -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background:-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background-position:left bottom, right bottom, right top, left top;
    -moz-background-size:51% 51%;
    -webkit-background-size:51% 51%;
    background-size:51% 51%;
    background-repeat:no-repeat;
}


<div class="single-border">
  Single border
</div>