我想知道是否可以在我的 clip-path:polygon(); 样式中添加边框,或者以任何其他方式添加边框?例如:border:5px solid red; .poligon {display: inline-block;position:
我想知道是否可以添加 border
我的 clip-path:polygon();
风格或任何其他方式来添加边框?
喜欢 : border:5px solid red;
.poligon {
display: inline-block;
position: relative;
width: 150px;
height: 150px;
background: black;
box-sizing: border-box;
padding: 55px;
}
.poligon img {
display: inline-block;
border: 5px solid red;
width: 150px;
height: 150px;
-webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
-moz-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
}
<div class="poligon">
<img src="http://lorempixel.com/g/600/400/">
</div>
复制收缩方法仅适用于简单情况——用于当前接受的答案
目前接受的答案是通过复制并缩小它来实现的。这适用于示例,但如果形状更复杂(如文本),则不起作用。更好的方法是使用过滤器进行扩张。
形状扩张适用于任何形状
更好的方法是使用 feMorphology 过滤器进行扩张!!
关键方面:
<image>
且 <rect>
高度和宽度相等的形状
rect
以制作边框
过滤器 radius=
成为边框厚度的替代品。
结果:
.clipper{
clip-path: url(#clip_shape);
}
.dilate{
filter: url("#dilate_shape");
}
<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400">
<defs>
<clipPath id="clip_shape" clipPathUnits="objectBoundingBox">
<text x="0" y=".8" lengthAdjust="spacing" font-weight="700" font-style="italic" font-size="1"> M </text>
</clipPath>
<filter id="dilate_shape">
<feMorphology operator="dilate" in="SourceGraphic" radius="5" />
</filter>
</defs>
<g transform="translate(5,5)">
<g class="dilate">
<rect class="clipper" x=0 y=0 height="400px" width="400px" fill="lightgreen"></rect>
</g>
<image class="clipper" xlink:href="http://placekitten.com/400/300" height="400px" width="400px">
</g>
</svg>