如何在我的剪辑路径中添加边框：polygon(); CSS样式

我想知道是否可以在我的剪辑路径中添加边框：polygon();风格或任何其他方式添加边框？

喜欢：border：5px solid red;

CSS

.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%,79.82051% 18.34936%);
}

HTML

<div class="poligon">
  <img src="http://lorempixel.com/g/600/400/">
</div>

解决方法

边框可以沿剪辑路径应用到剪辑的元素吗？

否,向剪辑的元素添加边框属性将不会应用剪裁路径的边框,因为在应用剪辑路径之前将边框应用于原始矩形(或方形)容器,因此也会被剪切掉.您可以在下面的代码片段中看到这一点：

div {
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 3px solid;
  background: darkseagreen;
}
div + div {
  -webkit-clip-path: polygon(50% 0%,100% 100%,100% 0%);
}

<div></div>
<div></div>

是否有替代方式来创建这样的边界效应？

我们可以通过在容器元素上应用相同的剪辑路径来模拟它.容器元素的背景颜色将看起来像内部元素的边框,因为它们都被剪切,并且容器的尺寸比内部元素略高.

.poligon {
  display: inline-block;
  position: relative;
  width: 150px;
  height: 150px;
  background: red;
  Box-sizing: border-Box;
  -webkit-clip-path: polygon(92.32051% 40%,79.82051% 18.34936%);
}
.poligon img {
  position: absolute;
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  width: 146px; /* container height - (border thickness * 2) */
  height: 146px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(92.32051% 40%,79.82051% 18.34936%);
}

<div class="poligon">
  <img src="http://lorempixel.com/g/600/400/">
</div>

为什么上述在Firefox中不起作用？

如注释所述,Firefox currently supports only the url(...) syntax用于剪辑路径,它需要一个SVG路径(内联或外部)作为输入.与CSS语法相比,SVG剪辑路径并不是很大,可以轻松创建.我们需要做的就是使用带多边形的SVG clipPath元素.多边形的点需要作为分数而不是百分比来提供.

.poligon {
  display: inline-block;
  position: relative;
  width: 150px;
  height: 150px;
  background: red;
  Box-sizing: border-Box;
  -webkit-clip-path: url(#clipper);
  -moz-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
.poligon img {
  position: absolute;
  top: 2px;  /* equal to border thickness */
  left: 2px;  /* equal to border thickness */
  width: 146px;  /* container height - (border thickness * 2) */
  height: 146px;  /* container height - (border thickness * 2) */
  -webkit-clip-path: url(#clipper);
  -moz-clip-path: url(#clipper);
  clip-path: url(#clipper);
}

<svg width="0" height="0">
  <defs>
    <clipPath id="clipper" clipPathUnits="objectBoundingBox">
      <polygon points=".9232051 .40,.9379385 .431596,.9469616 .4652704,.95 .50,.9469616 .5347296,.9379385 .568404,.9232051 .60,.7982051 .8165064,.7782089 .8450639,.7535575 .8697152,.725 .8897114,.693404 .9044449,.6597296 .9134679,.625 .9165064,.375 .9165064,.3402704 .9134679,.306596 .9044449,.275 .8897114,.2464425 .8697152,.2217911 .8450639,.2017949 .8165064,.0767949 .60,.0620615 .568404,.0530384 .5347296,.05 .50,.0530384 .4652704,.0620615 .431596,.0767949 .40,.2017949 .1834936,.2217911 .1549361,.2464425 .1302848,.275 .1102886,.306596 .0955551,.3402704 .0865321,.375 .0834936,.625 .0834936,.6597296 .0865321,.693404 .0955551,.725 .1102886,.7535575 .1302848,.7782089 .1549361,.7982051 .1834936"
      />
    </clipPath>
  </defs>
</svg>
<div class="poligon">
  <img src="http://lorempixel.com/g/600/400/">
</div>