CSS геометрии - смешанные фигуры?

Question

можно ли задать форму изображения не только с прямыми или округлыми формами, но и с сочетанием обоих?

Я хочу, чтобы мое изображение было в форме эмблемы, например: Изображение Возможно ли это только с помощью css или мне нужно больше svg / canvas?

Заранее спасибо

Answer 1

Вы можете использовать свойства css clip-path или mask с svg.Вот несколько примеров:

Путь к клипу:

.element-clip-path {
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Маска:

.element-mask {
    -webkit-mask: url(/path/to/mask.svg);
    -moz-mask: url(/path/to/mask.svg);
    -ms-mask: url(/path/to/mask.svg);
    -o-mask: url(/path/to/mask.svg);
    mask: url(/path/to/mask.svg);
}

Это отличный онлайн-инструмент, который можно использовать для создания путей к клипам: https://bennettfeely.com/clippy/