Как сделать такую прерывистую рамку?
Без использования clip-path. Понимаю, что надо использовать псевдоэлементы с бордерами. Но их получится слишком много.
Есть ли простой способ?
Ответ
Смотреть на весь экран
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
width: 40rem;
height: 20rem;
background-image: url('https://images.unsplash.com/photo-1503264116251-35a269479413?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=281dd3518c2edb68c31b19bbcb624a0f&auto=format&fit=crop&w=1350&q=80');
padding: 1rem;
}
.wrapper .wrapper-img {
width: 100%;
height: 100%;
background-image: linear-gradient(white, white), linear-gradient(90deg, white 150px, transparent 2vw), linear-gradient(transparent 15vw, white 15vw), linear-gradient(90deg, white 25vw, transparent 25vw, transparent 40vw, white 40vw);
background-size: 4px 100%, 150px 4px, 4px 200px, 100% 4px;
background-position: 0 0, 0 0, 100% 100%, 100% 100%;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
Комментариев нет:
Отправить комментарий