CSS几何 - 混合形状？

【问题标题】：CSS geometrics - mixed shapes?CSS几何 - 混合形状？
【发布时间】：2018-11-05 22:50:49
【问题描述】：

是否可以设置图像的形状，不仅可以使用直线形状或圆形形状，还可以混合使用两者？

我希望我的图像具有这样的标志形状： Image 这可能仅使用 css 还是我需要进一步的 svg/canvas？

提前致谢

【问题讨论】：

这种形状使用 SVG 应该很容易......使用 CSS 实现和维护会变得很复杂
这是可能的，但实现它的工作量太大，但使用SVG 会容易得多。在这里Check this Shapes of css 得到一个想法。
所以当我通过 img 标签实现图像时，如何使用 svg 文件影响形状？

标签： css svg canvas geometry

【解决方案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/

【讨论】：