Как создать вырезанный дизайн границ с помощью 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-страницу, если вы решили оптимизировать его для мобильного просмотра.