Как сделать что-то вроде такого?
Ну или в форме трапеции или в форме сферы ну или в любой другой форме.
Есть ли способ проверить наведение :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;
}
Пример 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; }
Комментариев нет:
Отправить комментарий