如何在我的剪辑路径中添加边框：polygon(); CSS 风格
How to add border in my clip-path: polygon(); CSS style
我想知道是否可以在我的 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>
是否可以沿剪切路径将边框应用于剪切元素？
否，将 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%);
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>
使用 SVG 扩张过滤器向复杂的剪辑路径添加边框
Copy-Shrink Method Only Works in Simple Cases -- used in currently accepted answer
目前接受的答案是复制并缩小。这适用于该示例，但如果您有更复杂的形状（如文本），它将不起作用。更好的方法是使用带有过滤器的膨胀。
形状膨胀适用于任何形状
更好的方法是将膨胀与 feMorphology 过滤器一起使用！！
关键方面：
- 创建高度和宽度相等的匹配
<image> 和 <rect> 形状
- 用所需的形状剪辑两者path/polygon
- 使用滤镜dilate/enlarge剪裁
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>
伪元素
一个很好的方法是使用像 :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>
我有另一种解决方法..
这就是我正在做的事情：
.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 元素来实现。希望这对您有所帮助！！
操作方法如下。
<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;
}
}
带有伪元素的解决方案
我正在写一些简单的代码，使用伪元素-::before，我想分享一下。
我创建了相同的 shape-poligon，只是更大。
所以看起来它有一个你想要的边框 (5px)
link 一些不错的 clip-path: 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>
这是我第一次 post 来这里。
我不知道它是否回答了你的问题，但这是我的解决方案：
<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，添加2px的border会使wrapper比testdiv宽高到2px+2px。因此，通过保持相同的百分比值，您可以创建恒定的边框宽度差异。
wrapper的边框和背景颜色必须相同，边框为未切割区域，背景为切割区域。
可以使用投影
- 形状只输入一次
- 可以根据内容自动设置大小
- 边缘在形状之外
- 一个“边框容器”可以包含更多形状
.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>
对不起我的英语
我的解决方案比此处的许多 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>
我想知道是否可以在我的 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>
是否可以沿剪切路径将边框应用于剪切元素？
否，将 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%);
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>
使用 SVG 扩张过滤器向复杂的剪辑路径添加边框
Copy-Shrink Method Only Works in Simple Cases -- used in currently accepted answer
目前接受的答案是复制并缩小。这适用于该示例，但如果您有更复杂的形状（如文本），它将不起作用。更好的方法是使用带有过滤器的膨胀。
形状膨胀适用于任何形状
更好的方法是将膨胀与 feMorphology 过滤器一起使用！！
关键方面：
- 创建高度和宽度相等的匹配
<image>和<rect>形状 - 用所需的形状剪辑两者path/polygon
- 使用滤镜dilate/enlarge剪裁
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>
伪元素
一个很好的方法是使用像 :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>
我有另一种解决方法..
这就是我正在做的事情：
.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 元素来实现。希望这对您有所帮助！！
操作方法如下。
<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;
}
}
带有伪元素的解决方案
我正在写一些简单的代码，使用伪元素-::before，我想分享一下。
我创建了相同的 shape-poligon，只是更大。
所以看起来它有一个你想要的边框 (5px)
link 一些不错的 clip-path: 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>
这是我第一次 post 来这里。 我不知道它是否回答了你的问题，但这是我的解决方案：
<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，添加2px的border会使wrapper比testdiv宽高到2px+2px。因此，通过保持相同的百分比值，您可以创建恒定的边框宽度差异。
wrapper的边框和背景颜色必须相同，边框为未切割区域，背景为切割区域。
可以使用投影
- 形状只输入一次
- 可以根据内容自动设置大小
- 边缘在形状之外
- 一个“边框容器”可以包含更多形状
.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>
对不起我的英语
我的解决方案比此处的许多 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>