如何在我的剪辑路径添加边框：polygon（）; CSS样式 [英] How to add border in my clip-path: polygon(); CSS style

问题描述

我想知道是否可以在我的剪辑路径：polygon（）; border >样式或任何其他方式添加边框？

like： 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％，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％）; 
} 
  

HTML

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

解决方案

可以将边框应用于剪辑元素沿着剪辑路径？

否，将 border 属性添加到剪辑元素不会应用边界，因为 border 应用于原始矩形（或正方形）容器之前 clip-path 因此，它也被剪辑出来。您可以在以下代码段中看到这一点：

  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％）;}  

pre class =snippet-code-html lang-html prettyprint-override> < div>< / div>< div>< / div> pre>

---

边框效果？

我们可以通过在容器上应用相同的 clip-path 元件。容器元素的背景颜色将看起来像是内部元素的边框，因为两者都被剪切，容器的尺寸略高于内部元素。

  .poligon {display：inline-block;位置：相对; width：150px; height：150px;背景：红色; box-sizing：border-box; -webkit-clip-path：多边形（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：多边形（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％）;}。 top：2px; / *等于边框粗细* / left：2px; / *等于边框粗细* / width：146px; / * container height  - （border thickness * 2）* / height：146px; / *容器高度 - （边界粗细* 2）* / -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：多边形（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>  

---

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

如评论中所述， Firefox目前仅支持 url（.. 。） clip-path 的语法，它需要SVG路径（内联或外部）作为输入。 SVG clip-path 与CSS语法相比没有太大不同，可以很容易地创建。我们需要做的是使用SVG clipPath 元素与多边形。

  .poligon {display：inline-block;位置：相对; width：150px; height：150px;背景：红色; box-sizing：border-box; -webkit-clip-path：url（#clipper）; -moz-clip-path：url（#clipper）; clip-path：url（#clipper）;}。poligon img {position：absolute; top：2px; / *等于边框粗细* / left：2px; / *等于边框粗细* / 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 =0height =0> < defs> < clipPath id =clipperclipPathUnits =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,0.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>  

I want to know if it is a possible to add border in my clip-path:polygon(); style or any another way to add border?

like : 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%, 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%);
}

HTML

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

解决方案

Can border be applied to a clipped element along the clip path?

No, adding border property to the clipped element would not apply the borders along the clipped path because the border is applied to the original rectangle (or square) container before the clip-path is applied and so, it also gets clipped out. You can see this in the below snippet:

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>

---

Are there any alternate ways to create such a border effect?

We can mimic it by applying the same clip-path on a container element. The container element's background color will look as though it is the border of the inner element because both are clipped and the container has slightly higher dimensions than the inner element.

.poligon {
  display: inline-block;
  position: relative;
  width: 150px;
  height: 150px;
  background: red;
  box-sizing: border-box;
  -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%);
}
.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%, 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>

---

Why does the above not work in Firefox?

As mentioned in comments, Firefox currently supports only the url(...) syntax for clip-path and it requires an SVG path (inline or external) as input. SVG clip-path is not very different compared to the CSS syntax and can be created easily. All we need to do is use SVG clipPath element with a polygon. The points of the polygon need to be provided as fractions instead of as percentages.

.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>

这篇关于如何在我的剪辑路径添加边框：polygon（）; CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！