CSS几何 - 混合形状？

Question

是否可以设置图像的形状，不仅是直线形状还是圆形形状，而是两者兼而有之？

我希望我的形象像这样的徽章形状： Image 这可能只是用css还是我需要进一步的svg / canvas？

提前致谢

Answer 1

您可以将sss 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/