Страницы

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

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

Треугольник с частью изображения

Как лучше всего реализовать такой треугольник с частью изображения.

Изначально попробовал перекрыть с фоновым .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 на высоте)

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

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