如何在我的剪辑路径中添加边框：多边形（）； CSS 样式

Question

我想知道是否可以在我的clip-path:polygon(); 样式中添加border 或任何其他方式添加边框？

点赞：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>

Answer 1

是否可以沿剪辑路径对剪辑的元素应用边框？

不，将border 属性添加到剪切元素不会沿剪切路径应用边框，因为border 在应用clip-path 之前应用于原始矩形（或正方形）容器，因此，它也被剪掉了。您可以在下面的 sn-p 中看到这一点：

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%);
  clip-path: polygon(50% 0%, 100% 100%, 100% 0%);
}

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

---

有没有其他方法可以创建这样的边框效果？

我们可以通过在容器元素上应用相同的clip-path 来模仿它。容器元素的背景颜色看起来就像是内部元素的边框，因为两者都被裁剪并且容器的尺寸比内部元素略高。

.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%);
  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%);
  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="https://picsum.photos/600/400">
</div>

Answer 2

使用 SVG Dilation Filter 为复杂的剪辑路径添加边框

Copy-Shrink 方法仅适用于简单情况——用于当前接受的答案

当前接受的答案通过复制和缩小来起作用。这适用于示例，但如果您有更复杂的形状（如文本），它将不起作用。更好的方法是使用带有过滤器的膨胀。

形状扩张适用于任何形状

更好的方法是使用带有 feMorphology 过滤器的膨胀！！

• SVG feMorphology Filter

关键方面：

• 创建高度和宽度相等的匹配 <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>

Answer 3

伪元素

一个很好的方法是使用像:before这样的伪元素

制作完全相同的形状，但稍小一些，以保持您想要的主要颜色并正确放置它，然后您就会得到您想要的边框。

下面的例子不是正确的形状，但显示了如何实现这种效果：

.shape {
  width: 400px;
  height: 40px;
  background-color: black;
  position: relative;
}
.shape:before {
  content: '';
  width: 398px;
  height: 38px;
  background: #00c000;
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
}
.shape, .shape:before {
  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
}
  

<div class="shape"></div>

Answer 4

伪元素解决方案

我正在编写一些简单的代码，使用伪元素 - ::before，我想分享。

我创建了相同的形状-poligon，只是更大。

所以它似乎有你想要的边框（5px）

链接到一些不错的剪辑路径：https://bennettfeely.com/clippy/

.poligon {
  height: 160px;
  width: 160px;
  background-color: black;
  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::before {
  content: "";
  display: block;
  position: relative;
  top: 5px;
  left: 5px;
  height: 150px;
  width: 150px;
  background-color: red;
  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"></div>

Answer 5

可以使用Drop-Shadow

• 形状只输入一次
• 大小可根据内容自动设置
• 边缘在形状之外
• 一个“边框容器”可能包含更多形状

.arrowBg {
  filter: drop-shadow(1px 0px 0px black)
          drop-shadow(-1px 0px 0px black)
          drop-shadow(0px 1px 0px black)
          drop-shadow(0px -1px 0px black)
          drop-shadow(1px 1px 0px black)
          drop-shadow(-1px -1px 0px black)
          drop-shadow(-1px 1px 0px black)
          drop-shadow(1px -1px 0px black);
}
.arrow {
  background: #FFFF00;
  margin:20px;
  font-family: sans-serif;
  font-size:20px;
}
.arrowLeft {
  padding: 20px 20px 20px 40px;
  clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 40px 100%, 0 50%);
}
.arrowRight{
  padding: 20px 40px 20px 20px;
  clip-path: polygon(calc(100% - 40px) 0%, 0 0, 0 100%, calc(100% - 40px) 100%, 100% 50%);
}

<br><br><br>
<span class="arrowBg">
  <span class="arrow arrowLeft">Go left</span>
  <span class="arrow arrowRight">Go go go right</span>
</span>

对不起我的英语

Answer 6

这里是怎么做的。

<div class="screenshot"><img src="assets/img/tutorial/1.jpg"></div>

只需添加复制蒙版并向父级添加填充。

.screenshot {
    mask: url(../assets/img/bubble.svg) center center no-repeat;
    background: white;
    padding: 10px;

    img {
        mask: url(../assets/img/bubble.svg) center center no-repeat;
    }
}

Answer 7

这是我在这里的第一篇文章。 我不知道它是否回答了您的问题，但这是我的解决方案：

<style>
#wrapper {
    width: fit-content;
    margin: auto;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 90%, 50% 100%, 40% 90%, 0 100%);
    background: white;
    border: 2px solid white;
}
#test {
    width: 500px;
    height: 300px;
    margin: auto;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 90%, 50% 100%, 40% 90%, 0 100%);
    background: red;
    
}
</style>

<div id="wrapper">
    <div id=test>
    </div>
</div>

fit-content 将使包装器的大小等于测试 div。但是由于块元素的总宽度和高度是 content + padding + border，添加 2 px 的边框会使包装器更宽并高于测试 div 到 2px + 2px。因此，通过保持相同的百分比值，您可以创建一个恒定的边框宽度差异。

包装的边框和背景颜色必须相同，边框用于未切割区域，背景用于切割区域。

Answer 8

我有另一个解决方案..

这就是我正在做的事情：

.top-angle-left {
    -webkit-clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%);
    position: relative;
}

.top-angle-left:after {
    -webkit-clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%);
    clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%);
    background: #e99d15;
    content: '';
    position: absolute;
    left: 0;
    top: -82%;
    right: 0;
    height: 100%;
    display: block;
    z-index: 9;
}

:after 元素始终可以随其父容器缩放，因此现在这是 100% 响应式的。这只能通过将负顶部应用于 :after 元素来完成。希望这有帮助！

Answer 9

我有一个比这里的许多 css 解决方案更清洁的解决方案，但是如果您使用的是凹形或具有非常小角度的角的形状，它就会崩溃。在我的示例中，形状的左侧显示了大多数凸形的外观如何，而右侧显示了凹形会遇到的问题。尽管如此，它还是比改变定位和移动元素更简单、更简洁。

:root {
  --indent: 15%;
  --arrow-shape: polygon(
    var(--indent) 0,
    0 50%,
    var(--indent) 100%,
    100% 100%,
    calc(100% - var(--indent)) 50%,
    100% 0
  );
}

.parallelogram-outline {
  display: inline-block;
  background-color: black;
  padding: 5px;
  clip-path: var(--arrow-shape);
}


.parallelogram {
  font-family: sans-serif;
  background-color: white;
  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
  clip-path: var(--arrow-shape);
}

<div class="parallelogram-outline">
  <div class="parallelogram">
    Text
  </div>
</div>