Страницы

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

суббота, 20 апреля 2019 г.

Кастомные блоки на сайте

Как сделать что-то вроде такого? Ну или в форме трапеции или в форме сферы ну или в любой другой форме.
Есть ли способ проверить наведение :hover ровно по краям, а не прямоугольником.
Пробовал сделать в svg, но мне кажется есть другие способы о которых я не знаю


Ответ

Пример 1 с боковыми белыми блоками :after и :before
.intro { position: relative; min-height: 200px; height: 100%; width: 100%; background: transparent url(https://images.unsplash.com/photo-1432821596592-e2c18b78144f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3f9c78df0edb464244bbabb04d1797d8) top center no-repeat; background-size: 100%; transition: all .27s ease-in-out; } .intro:hover { -webkit-background-size: 110%; background-size: 110%; } /* Для верхнего блока */ .intro_t:before, .intro_t:after { content: ''; display: block; position: absolute; bottom: 0; width: 0; height: 0; } /* Для нижнего блока */ .intro_b:before, .intro_b:after { content: ''; display: block; position: absolute; top: 0; width: 0; height: 0; } .intro_t:before { left: 0; width: 50%; right: 50%; margin-left: 0px; border-bottom: 50px solid #fff; border-right: 50px solid transparent; } .intro_t:after { right: 0; width: 50%; left: 50%; margin-right: 0px; border-bottom: 50px solid #fff; border-left: 50px solid transparent; } .intro_b:before { left: 0; width: 50%; right: 50%; margin-left: 0px; border-top: 50px solid #fff; border-right: 50px solid transparent; } .intro_b:after { right: 0; width: 50%; left: 50%; margin-right: 0px; border-top: 50px solid #fff; border-left: 50px solid transparent; } /* Доп.стили */ body, html { margin: 0; padding: 0; background: #fff; } *, *:before, *:after { box-sizing: border-box; } .some__content { padding: 2rem; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, est.

Пример 2 с clip-path
.intro { display: inline-block; vertical-align: top; padding: 0; width: 100%; min-height: 250px; background: url(https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=61282cfeed75871385c84c2a44a8e594) bottom no-repeat; background-size: 100%; transition: all .27s ease-in-out; } .intro:hover { -webkit-background-size: 110%; background-size: 110%; } .clip-wrap-1 { -webkit-clip-path: polygon(0 0, 100% 0, 100% 200px, 60% 200px, 50% 250px, 40% 200px, 0% 200px); clip-path: polygon(0 0, 100% 0, 100% 20%, 60% 20%, 50% 30%, 40% 20%, 0% 20%); } .clip-wrap-2 { -webkit-clip-path: polygon(0 0, 40% 0%, 50% 50px, 60% 0%, 100% 0%, 100% 200px, 0% 200px); clip-path: polygon(0 0, 40% 0%, 50% 10%, 60% 0%, 100% 0%, 100% 20%, 0% 20%); } /* Доп.стили */ body, html { margin: 0; padding: 0; background: #fff; } *, *:before, *:after { box-sizing: border-box; } .some__content { padding: 2rem; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, est.

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

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