Как создать вырезанный дизайн границ с помощью CSS

С вырезанным дизайном границ мы можем показать пользователям, что находится под областью границ HTML-элемента. Эта задача обычно решается путем размещения двух или более блочных элементов (в большинстве случаев div) разных размеров друг над другом. Во-первых, это кажется легким решением, но становится все более неприятным, когда вы хотите многократно использовать макет, перемещаться по элементам, оптимизировать дизайн для мобильных устройств или поддерживать код.

В этом посте я покажу вам элегантное решение только для CSS, в котором для достижения того же эффекта используется только один элемент HTML. Этот метод также отлично подходит для доступности, так как он загружает фоновое изображение в CSS, отдельно от HTML.

К концу этого поста вы узнаете, как отобразить фоновое изображение в области границ, чтобы создать вырезанный дизайн границы, который вы можете увидеть ниже. Я также покажу, как вы можете сделать дизайн адаптивным, используя единицы просмотра.

Читайте также: Как создать CSS градиентные цвета границ

Увидеть перо CSS Cutout Border HONGKIAT (@hkdc) на CodePen,
Исходный код
Единственное требование в передней части HTML — это блочный элемент:

Нам нужно будет повторно использовать размеры (ширину и высоту) и значения ширины границы элемента div, поэтому я представлю их как переменные CSS. Переменная —w обозначает ширину блочного элемента .cb, —h обозначает его высоту, —b обозначает ширину границы, а —b2 обозначает ширину границы, умноженную на 2. Позже мы увидим использование последней переменной.

Я оцениваю

<

div> относительно ширины области просмотра, отсюда и использование модуля vw (вы можете использовать фиксированные единицы, если хотите).

.cb {
  — ш: 35 ватт;
  — ч: 40 кВт;
  —b: 4vw;
  —b2: calc (var (- b) * 2);
}

Краткое объяснение — VW и VH единиц
Единица vw представляет 1/100 ширины области просмотра. Например, 50vw — это 50 частей ширины области просмотра, разрезанных по вертикали на 100 равных частей, в то время как 50vh — это 50 частей высоты области просмотра, разрезанных по горизонтали на 100 равных частей.

Давайте улучшим приведенный выше код, добавив фон и установив границу, высоту и ширину, используя наши предопределенные переменные CSS.

.cb {
  — ш: 35 ватт;
  — ч: 40 кВт;
  —b: 4vw;
  —b2: calc (var (- b) * 2);
  фон: URL (bg.jpg);
  граница: var (- b) сплошная прозрачная;
  высота: вар (- ч);
  ширина: var (- w);
}

Вот как демоверсия должна выглядеть прямо сейчас:
Размер фонового изображения
Нам нужно фоновое изображение, чтобы покрыть всю область

<

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

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

<

div> также. Что касается кода, использованного до сих пор, вот фоновое значение, которое я ему даю:

.cb {
  — ш: 35 ватт;
  — ч: 40 кВт;
  —b: 4vw;
  —b2: calc (var (- b) * 2);
  фон: url (bg.jpg) center / calc (var (- w) + var (- b2))
      calc (var (- h) + var (- b2));
  граница: var (- b) сплошная прозрачная;
  высота: вар (- ч);
  ширина: var (- w);
}

Ширина фонового изображения [calc(var(—w) + var(—b2))] это сумма ширины div [var(—w)] и ширина левой и правой границ [var(—b2)],

Аналогично высота фонового изображения [calc(var(—h) + var(—b2))] сумма высоты деления [var(—h)] и ширина верхней и нижней границ [var(—b2)],

Таким образом, мы изменили размер фонового изображения до области, которая равна размеру div (включая область границы).

Ключевое слово center выравнивает фоновое изображение по центру div.

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

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

.cb {
  — ш: 35 ватт;
  — ч: 40 кВт;
  —b: 4vw;
  —b2: calc (var (- b) * 2);
  фон: url (bg.jpg) center / calc (var (- w) + var (- b2))
      calc (var (- h) + var (- b2));
  граница: var (- b) сплошная прозрачная;
  box-shadow: вставка var (- w) 0 0 rgba (0,120,237, .5);
  высота: вар (- ч);
  ширина: var (- w);
}

Горизонтальная тень со значением var (- w) покрывает всю ширину div. Использование функции цвета rgba позволяет добавить некоторую прозрачность в микс, однако вы также можете использовать непрозрачный цвет, если вы хотите полностью покрыть центральную область.
Добавьте дополнительную рамку с box-shadow
В демонстрации Codepen вы могли видеть белую рамку вокруг изображения. Существует известный трюк с использованием box-shadows для создания нескольких границ — мы можем использовать ту же технику, чтобы добавить одну или несколько сплошных цветных границ в наш дизайн.

Обновленное значение box-shadow:

.cb {
— ш: 35 ватт;
— ч: 40 кВт;
—b: 4vw;
—b2: calc (var (- b) * 2);
фон: url (bg.jpg) center / calc (var (- w) + var (- b2))
    calc (var (- h) + var (- b2));
граница: var (- b) сплошная прозрачная;
box-shadow: вставка var (- w) 0 0 rgba (0,120,237, .5),
    0 0 0 calc (var (- b) / 2) белый;
высота: вар (- ч);
ширина: var (- w);
}

Функция calc (var (- b) / 2) создает тень от половины ширины границы.
Дополнительно: отдельное расположение и эстетика
В моей последней демонстрации Codepen я поместил код для фонового изображения и цвет тени блока в отдельный класс. Это необязательно, но может быть чрезвычайно полезно, если вы хотите повторно использовать макет контура с вырезом в нескольких элементах и ​​добавлять эстетику (фоновое изображение + цвет) для каждого элемента независимо.

Я добавил класс с именем .poster1 к

<

div> для достижения этой цели.

.poster1 {
  —tbgc: rgba (0,120,237, .5);
  background-image: url («http://bit.ly/2eQBij2»);
}

Поскольку фон является сокращенным свойством, его дополнительные свойства могут быть переопределены / установлены индивидуально. Следовательно, мы можем установить background-image в .poster1 и удалить значение url из свойства background в .cb.

Чтобы установить значение box-shadow, мы можем использовать другую переменную CSS. Переменная —tbgc содержит значение цвета, которое мы хотим дать box-shadow (lightblue в демоверсии), поэтому среди правил стиля для .cb мы заменяем значение цвета свойства box-shadow на var (- tbgc ).

.cb {
  — ш: 35 ватт;
  — ч: 40 кВт;
  —b: 4vw;
  —b2: calc (var (- b) * 2);
  background: center / calc (var (- w) + var (- b2))
      calc (var (- h) + var (- b2));
  граница: var (- b) сплошная прозрачная;
  box-shadow: вставка var (- w) 0 0 var (- tbgc),
      0 0 0 calc (var (- b) / 2) белый;
  высота: вар (- ч);
  ширина: var (- w);
}

Код для портретного режима
Поскольку все размеры указаны в единицах vw, он будет выглядеть слишком маленьким, когда вы просматриваете дизайн в портретном режиме (меньшая ширина относительно высоты) — на котором все мобильные устройства включены по умолчанию. Чтобы решить эту проблему, переключите vw с помощью vh и измените размер дизайна, как вы считаете нужным для портретных режимов.

@media (ориентация: портрет) {
  .cb {
      — Вт: 35 кВт;
      — ч: 40 вч;
      — б: 4вч;
  }
}

Примечание. Не забудьте добавить метатег viewport на свою HTML-страницу, если вы решили оптимизировать его для мобильного просмотра.