Лера, если ширина прерывания заранее известна, то можно обойтись без маски.
Для начала сверстаем блок со сплошной рамкой:
/* 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
А теперь заменим нижнюю рамку на две полоски с помощью псевдоэлементов:
/* 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
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.