使用 SVG 形状遮罩图像并添加边框

Question

不确定这是否可行，所以我有一个备用计划（使用背景图像和 :after 用图像中的边框遮盖其中一个 3x transarent PNG，并使用 nth-child改变它们）。

这就是我想要完成的。我知道 clip-path 会给我图像遮罩，但我也需要弯曲的边缘和边框颜色。我认为这在纯 CSS.

中是不可能的

Answer 1

<!DOCTYPE html>
<html>
    <style>

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 300px;
  height: 300px;
  margin: 1em auto;
}

.frame-border {
  stroke: #10c020;
  stroke-width: 4;
}

</style>
    <body>
        <div class="container">
            <svg viewBox="-10 -10 120 120">
                <defs>
                    <mask id="mask">
                        <rect fill="#000000" x="0" y="0" width="300" height="300"></rect>
                        <path id="Path_611" data-name="Path 611" d="M1,38a12.225,12.225,0,0,1,2.558-3.025L41.351,13.462A21.12,21.12,0,0,1,46.733,12.4a14.319,14.319,0,0,1,4.81.765L89.2,34.814A7.333,7.333,0,0,1,92,37a7.273,7.273,0,0,1,1,3.4v45.3A6.741,6.741,0,0,1,92,89a12.9,12.9,0,0,1-3.015,2.945L50.42,110.628a8.953,8.953,0,0,1-3.688.786,13.383,13.383,0,0,1-4.153-.992L4.2,92.012A12.105,12.105,0,0,1,1,89a7.112,7.112,0,0,1-1-3.581V41.534A9.569,9.569,0,0,1,1,38Z" transform="translate(1.502 -10.892)" fill="#FFFFFF"/>
                    </mask>
                </defs>
                <image mask="url(#mask)"
                    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://randomuser.me/api/portraits/women/47.jpg" width="100" height="100">
                </image>
                <g class="frame-border" fill="none">
                    <path id="Path_611" data-name="Path 611" d="M1,38a12.225,12.225,0,0,1,2.558-3.025L41.351,13.462A21.12,21.12,0,0,1,46.733,12.4a14.319,14.319,0,0,1,4.81.765L89.2,34.814A7.333,7.333,0,0,1,92,37a7.273,7.273,0,0,1,1,3.4v45.3A6.741,6.741,0,0,1,92,89a12.9,12.9,0,0,1-3.015,2.945L50.42,110.628a8.953,8.953,0,0,1-3.688.786,13.383,13.383,0,0,1-4.153-.992L4.2,92.012A12.105,12.105,0,0,1,1,89a7.112,7.112,0,0,1-1-3.581V41.534A9.569,9.569,0,0,1,1,38Z" transform="translate(1.502 -10.892)" stroke-linecap="round" />
                </g>
            </svg>
        </div>
    </body>
</html>

使用 SVG 形状遮罩图像并添加边框

Mask Image with SVG Shape and add a Border

svg

mask

clip-path