Лера, если ширина прерывания заранее известна, то можно обойтись без маски.

Для начала сверстаем блок со сплошной рамкой:

/* html */

<div class="background">
  <div class="block">
    <h2>Grand Tourer</h2>
    <p>a luxury performance car designed for high speed 
    and <nobr>long-distance</nobr> driving</p>
    <button>Shop all</button>
  </div>
</div>
/* css */

.background {
  padding: 20px;
  width: 500px;
  background: url(car.jpg) center / cover;
}

.block {
  position: relative;
  padding: 30px;
  border: 5px solid #fff;
  font-size: 20px;
  text-align: center;
  color: #fff;
}

.block h2 {
  margin: 0 0 10px;
  text-transform: uppercase;
}

.block p {
  margin: 0;
}

.block button {
  /* Спозиционируем ссылку так 
  чтобы она стояла по центру нижней рамки */
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
}

Grand Tourer

a luxury performance car designed for high speed and long‑distance driving

А теперь заменим нижнюю рамку на две полоски с помощью псевдоэлементов:

/* css */

.block {
  /* ... */
  border-bottom: 0;
}

.block::before,
.block::after {
  position: absolute;
  top: 100%;
  width: 170px;
  height: 5px;
  background: #fff;
  content: '';
}

.block::before {
  left: -5px;
}

.block::after {
  right: -5px;
}

Grand Tourer

a luxury performance car designed for high speed and long‑distance driving

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы