8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

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

Frak 1月前

44 0

我想知道是否可以在我的 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)
  • 我有一个比这里的许多 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>
  • 我对此有另一种解决方案......

    这是我正在做的事情:

    .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;
        }
    }
    
  • 我将父组件的高度和宽度设置为 fit-content,边框为 1px。并为子组件设置固定高度(因为宽度会根据文本而变化)。在所有这些解决方案中,它都为我提供了最干净的边框

  • 我登录只是为了说这是 IMO 的最佳解决方案!!它不仅简洁而且效果很好,而且在语义上也有意义(设置边框宽度),并且不需要任何任意边距或间距。绝对支持!

  • 这是我的解决方案:

    #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\',因此它包含额外的填充 + 边框;添加其中任何一个都会在剪辑区域周围产生额外的边框。只要您的剪辑具有相同的百分比值,您就可以为这个额外的边框创建一个恒定的差异。

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

  • 很棒的解决方案!为了简化它,您可以在 .poligon:before 中使用 clip-path: inherit; 而不是复制相同的值,它将复制父级的值!;D

  • 用伪元素解

    我正在写一些简单的代码,使用伪元素-::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”的评论:)

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

  • Pt15 1月前 0 只看Ta
    引用 11

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

  • 可以使用阴影

    • 形状仅输入一次
    • 可以根据内容自动设置尺寸
    • 边缘位于形状之外
    • 一个“边框容器”可以包含多个形状

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

    抱歉我的英语不好

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

  • 伪元素

    一个好方法是使用伪元素,例如 ::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>
  • 使用 SVG 膨胀滤镜为复杂剪切路径添加边框

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

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

    形状扩张适用于任何形状

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

    • SVG fe形态过滤器

    关键方面:

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

    过滤器 radius= 成为边框厚度的替代品。

    结果:

    enter image description here

    .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

    这对于图像中具有透明度的任何内容都不起作用,因为它也会将边框颜色置于透明度中。

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

  • @innovation:我还在答案中添加了 SVG 版本。这也适用于 Firefox。

  • @innovation:是的,Firefox 目前仅支持 url() 语法,并且需要 SVG(内联或外部)作为输入。您可以轻松地将现有的 CSS clip-path 多边形转换为 SVG 等效项。

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

返回
作者最近主题: