Страницы

Поиск по вопросам

четверг, 18 октября 2018 г.

Прерывистая рамка

Как сделать такую прерывистую рамку?

Без использования 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; }

Комментариев нет:

Отправить комментарий