那些遇到过的问题

如何在剪辑路径中添加边框:polygon(); CSS风格

inn*_*ion 22 css css3 css-shapes

我想知道是否可以添加border我的clip-path: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%, 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%);
}
Run Code Online (Sandbox Code Playgroud)

HTML

<div class="poligon">
  <img src="http://lorempixel.com/g/600/400/">
</div>
Run Code Online (Sandbox Code Playgroud)

Har*_*rry 51

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

不,向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%);
}
Run Code Online (Sandbox Code Playgroud) 
<div></div>
<div></div>
Run Code Online (Sandbox Code Playgroud)

有没有其他方法来创造这种边界效果？

我们可以通过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%);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="poligon">
  <img src="http://lorempixel.com/g/600/400/">
</div>
Run Code Online (Sandbox Code Playgroud)

  • @innovation：是的，[Firefox 目前仅支持 `url()` 语法](http://caniuse.com/#feat=css-clip-path)，并且它需要一个 SVG（内联或外部）作为其输入。您可以轻松地将现有的 CSS `clip-path` 多边形转换为等效的 SVG。 (2认同)
  • 谢谢你的宝贵答案. (2认同)
  • @innovation:我也在答案中添加了一个SVG版本.这也适用于Firefox. (2认同)
  • 这不适用于图像中具有透明度的任何内容，因为它也会将边框颜色放入透明度中。 (2认同)

Ste*_*ich 16

使用SVG扩张过滤器向复杂剪辑路径添加边框

复制缩小方法仅适用于简单案例 - 用于当前接受的答案

目前接受的答案是通过制作副本并缩小它来实现的.这适用于示例,但如果您有一个更复杂的形状(如文本),它将无法工作.更好的方法是使用过滤器扩张.

形状膨胀适用于任何形状

更好的方法是使用feMorphology过滤器进行扩张!!

主要方面:

  • 创建相同高度和宽度的匹配<image>和<rect>形状
  • 使用所需的形状路径/多边形进行剪辑
  • 使用滤镜扩大/放大剪裁rect边框

过滤器radius=成为边框厚度的支柱.

结果:

在此输入图像描述

.clipper{
  clip-path: url(#clip_shape);
}
.dilate{
  filter: url("#dilate_shape");
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

Rob*_*slo 15

可以使用投影

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

.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%);
}
Run Code Online (Sandbox Code Playgroud) 
<br><br><br>
<span class="arrowBg">
  <span class="arrow arrowLeft">Go left</span>
  <span class="arrow arrowRight">Go go go right</span>
</span>
Run Code Online (Sandbox Code Playgroud)

对不起我的英语不好

Ome*_*mer 10

带有伪元素的解决方案

我正在写一些简单的代码，使用伪元素 - ::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: 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%);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="poligon"></div>
Run Code Online (Sandbox Code Playgroud)

  • 很棒的解决方案！为了简化它，您可以在`.poligon:before`中使用`clip-path:继承;`而不是复制相同的值，它将复制父级的值！;D (3认同)

Cyr*_*ril 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;
}
Run Code Online (Sandbox Code Playgroud) 
 <div id="wrapper">
  <div id=test></div>
 </div>
Run Code Online (Sandbox Code Playgroud)

使用 fit-content 将使包装器的大小等于测试 div 的大小。由于包装器的盒子大小是“内容盒”，因此它包括额外的填充+边框；添加其中任何一个都会在剪切区域周围产生额外的边框。只要您的剪辑具有相同的百分比值，您就可以为这个额外的边框创建一个恒定的差异。

如果使用边框而不是填充来创建额外边框，则它必须与包装器背景的颜色相同。彩色背景是必要的，因为它为内部剪切区域提供了边框

Ste*_*ide 5

伪元素

一个很好的方法是使用伪元素（例如 :before

制作完全相同的形状，但稍小一些，以容纳所需的主色并将其正确放置，即可获得所需的边框。

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

.shape {
  width: 400px;
  height: 40px;
  background-color: black;
  -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%);
  position: relative;
}

.shape:before {
  content: '';
  width: 398px;
  height: 38px;
  -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%);
  background: green;
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="shape"></div>
Run Code Online (Sandbox Code Playgroud)

  • 与该问题的大多数解决方案一样，该解决方案对于任何凹多边形都失败。对于简单的凸多边形来说，这很好，但是凹多边形的“内部”部分不受此或任何其他“分层”效果的影响。很遗憾。 (6认同)

归档时间：

查看次数：

42203 次

最近记录：

6 年，4 月 前
相关归档
如何在CSS中执行width = 100% - 100px？ 137
调整字体大小以适合div(在一行上) 62
打印网页时删除页面标题和日期(使用CSS？) 58
Angular2 - 将[_ngcontent-mav-x]添加到样式中 27
如何写一个:访问内联CSS？ 19
垂直对齐内联 - 柔性元件 7
我的<circle>在哪里？ 5
如何设置单选按钮的样式？ 4
如何避免html元素重叠？ 3
将鼠标悬停在Twitter Bootstrap中的下拉菜单中 1
难疑归档
如何检查文件是否存在而没有例外？ 5290
有一个CSS父选择器吗？ 2986
循环内的JavaScript闭包 - 简单实用的例子 2689
Python中的静态方法？ 1639
如何恢复Git中丢失的存储？ 1617
SQL Server中的LEFT JOIN与LEFT OUTER JOIN 1514
在Python中将整数转换为字符串？ 1282
如何使用SSH在远程计算机上运行shell脚本？ 1164
按ID删除元素 1085
抵消html锚点以调整固定标题 1056