如何在我的剪辑路径中添加边框：polygon()；CSS 样式-css-IT问答社区-解决你的IT疑问

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

Frak 1月前

我想知道是否可以在我的 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>

帖子版权声明 1、本帖标题：如何在我的剪辑路径中添加边框：polygon()；CSS 样式
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Frak在本站《css》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

zest16 1月前 0 只看Ta

引用 2楼
我有一个比这里的许多 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>
Pavel Vainshtein 1月前 0 只看Ta

引用 3楼
我对此有另一种解决方案......

这是我正在做的事情：
```
.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 元素来实现。希望这对您有所帮助！！
Toby William 1月前 0 只看Ta

引用 4楼
以下是操作方法。
```
<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;
    }
}
```
awwright 1月前 0 只看Ta

引用 5楼

我将父组件的高度和宽度设置为 fit-content，边框为 1px。并为子组件设置固定高度（因为宽度会根据文本而变化）。在所有这些解决方案中，它都为我提供了最干净的边框
Adnan Habib 1月前 0 只看Ta

引用 6楼

我登录只是为了说这是 IMO 的最佳解决方案！！它不仅简洁而且效果很好，而且在语义上也有意义（设置边框宽度），并且不需要任何任意边距或间距。绝对支持！
CZoellner 1月前 0 只看Ta

引用 7楼
这是我的解决方案：
#wrapper { width: fit-content; margin: auto; clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 90%, 50% 100%, 40% 90%, 0 100%); background: black; border: 10px solid black; /* or use padding instead of border: */ /* padding: 10px; */ } #test { width: 300px; height: 150px; margin: auto; clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 90%, 50% 100%, 40% 90%, 0 100%); background: red; }

<div id="wrapper"> <div id=test></div> </div>
使用 fit-content 将使包装器的大小等于测试 div。由于包装器的框大小为 \'content-box\'，因此它包含额外的填充 + 边框；添加其中任何一个都会在剪辑区域周围产生额外的边框。只要您的剪辑具有相同的百分比值，您就可以为这个额外的边框创建一个恒定的差异。

如果使用边框而不是填充来创建额外的边框，则它必须与包装器的背景颜色相同。彩色背景是必要的，因为它为内部裁剪区域提供边框
Erik Bongers 1月前 0 只看Ta

引用 8楼

很棒的解决方案！为了简化它，您可以在 .poligon:before 中使用 clip-path: inherit; 而不是复制相同的值，它将复制父级的值！;D
Tim Bender 1月前 0 只看Ta

引用 9楼
用伪元素解

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

我创建了相同形状的多边形，只是更大一些。

因此看起来它有一个你想要的边框（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: inherit;

<div class="poligon"></div>
感谢“KevynTD”的评论:)
Vincent Reiley 1月前 0 只看Ta

引用 10楼

不幸的是，这个解决方案在边距较小时会失效。我尝试使用 0.5px，但这会导致边框不均匀。但对于简单的形状和边距 >=1px 来说，这是一个很好的解决方案。
Pt15 1月前 0 只看Ta

引用 11楼

非常感谢罗伯特。只需添加两点。1：在内部元素上应用背景颜色至关重要 - 我会在代码中以注释的形式强调这一点（我几乎不再相信更复杂的 svg 蒙版是我失败的原因）。2：可以减少阴影的组合，并可以忽略模糊值：过滤器：阴影（1px 1px 黑色）阴影（-1px -1px 黑色）阴影（0 1px 黑色）阴影（1px 0 黑色）；
zackrypaul 1月前 0 只看Ta

引用 12楼
可以使用阴影
- 形状仅输入一次
- 可以根据内容自动设置尺寸
- 边缘位于形状之外
- 一个“边框容器”可以包含多个形状
.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>
抱歉我的英语不好
BishalG 1月前 0 只看Ta

引用 13楼

与该问题的大部分解决方案一样，此方法不适用于任何凹多边形。对于简单的凸多边形，此方法没有问题，但凹多边形的“内部”部分不受此方法或任何其他“分层”效果的影响。不幸的是。
Ora Aff 1月前 0 只看Ta

引用 14楼
伪元素

一个好方法是使用伪元素，例如 ::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>
Killertouch 1月前 0 只看Ta

引用 15楼
使用 SVG 膨胀滤镜为复杂剪切路径添加边框

复制收缩方法仅适用于简单情况——用于当前接受的答案

目前接受的答案是通过复制并缩小它来实现的。这适用于示例，但如果形状更复杂（如文本），则不起作用。更好的方法是使用过滤器进行扩张。

形状扩张适用于任何形状

更好的方法是使用 feMorphology 过滤器进行扩张！！
- SVG fe形态过滤器
关键方面：
- 创建匹配 <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>
evn 1月前 0 只看Ta

引用 16楼

这对于图像中具有透明度的任何内容都不起作用，因为它也会将边框颜色置于透明度中。
Ayushman Mishra 1月前 0 只看Ta

引用 17楼

亲爱的，我想知道你是怎么做到的？因为我做了一些类似于你的答案的东西，但它看起来像这样。请点击。所以我想做什么。请点击我的其他演示。我想在这个演示中制作第一个 div
DarPlays 1月前 0 只看Ta

引用 18楼

@innovation：我还在答案中添加了 SVG 版本。这也适用于 Firefox。
eirikdaude 1月前 0 只看Ta

引用 19楼

@innovation：是的，Firefox 目前仅支持 url() 语法，并且需要 SVG（内联或外部）作为输入。您可以轻松地将现有的 CSS clip-path 多边形转换为 SVG 等效项。
Klaus Wilde 1月前 0 只看Ta

引用 20楼

谢谢亲爱的。问题不大。clip-path 不支持 Mozilla？因为我的演示样式在 Firefox 中不起作用？