Как лучше всего реализовать такой треугольник с частью изображения.
Изначально попробовал перекрыть с фоновым .png изображением. Но, такое решением не самое практичное.
Могут ли тут быть какие-то простые варианты? Примеры делать не обязательно, достаточно краткого описания или мыслей на этот счет.
Ответ
Итак, наилучшим решением для моих потребностей будут такие варианты:
body {
margin: 0;
padding: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: #f6f6f6;
}
div {
position: relative;
width: 140px;
height: 288px;
background-position: center;
background-size: cover;
margin: 10px;
}
svg {
margin: 10px;
-webkit-filter: drop-shadow(0 5px 15px rgba(0,0,0,0.15));
filter: drop-shadow(0 5px 15px rgba(0,0,0,0.15));
}
/* Делается накладка целиком на изображение. Минусом является отсутсвие возможности создать тень и невозможность масштабирования, точнее, сложности с масштабированием */
.mask {
mask: url(https://i.stack.imgur.com/V3TDk.png) no-repeat;
-webkit-mask: url(https://i.stack.imgur.com/V3TDk.png) no-repeat;
}
/* Тут мы создаем небольшой треугольник перенося фон из основного блока, а затем создаем для него обрезку по краям. Поддержка IE отсутсвует и cover не подходит для реализации, так как фон треугольника нужно четко подставить к основному изображению. */
.pseudo-triangle {
height: 280px;
border-radius: 10px;
background-position: left -7px;
background-size: auto 287px;
}
.pseudo-triangle:before {
content: '';
position: absolute;
left: 20px;
top: 100%;
display: block;
width: 14px;
height: 7px;
background-image: inherit;
background-position: -27px bottom;
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
Это накладка которая использовалась в первом варианте и в варианте с SVG:
Для второго и третьего варианта можно создать тень при помощи filter: drop-shadow. Для своих личных целей я использовал вариант с псевоэлементом, так как есть затемнение и разбежности фона не видно совсем, а само изображение можно масштабировать как угодно.
Поддержка для mask - CSS Masks
Поддержка для clip-path - CSS clip-path property
Поддержка для SVG на высоте)
Комментариев нет:
Отправить комментарий