Question

我希望能够在我创建的这个形状上找出最左边的3个角落，不知道如何做到这一点？

div {
  position: absolute;
  z-index: 1;
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  right: 0;
  margin-top: 10vw;
  -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

<div></div>

Answer 1

你也可以乱搞圈子以获得一些不同的效果。

-webkit-clip-path: circle(60.0% at 50% 10%);
clip-path: circle(50.0% at 50% 50%);

Codepen

太糟糕了，你不能把多边形和圆圈结合起来......或者你可以和我一起玩它并不足以解决它。 HTH

Answer 2

我最近发现成功尝试了这样的方法......

SVG

<svg width="0" height="0">
  <defs>
    <clipPath id="clipped">
      <circle cx="var(--myRad)" cy="var(--myRad)" r="var(--myRad)"></circle>
      <circle cx="var(--myRad)" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
      <circle cx="calc(var(--myWidth) - var(--myRad))" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
      <circle cx="calc(var(--myWidth) - var(--myRad))" cy="var(--myRad)" r="var(--myRad)"></circle>
      <rect y="var(--myRad)" width="var(--myWidth)" height="calc(var(--myHeight) - (2 * var(--myRad)))"></rect>
      <rect x="var(--myRad)" width="calc(var(--myWidth) - (2 * var(--myRad)))" height="var(--myHeight)"></rect>
    </clipPath>
  </defs>
</svg>

CSS

.clipped {
  --myWidth: 100vw;
  --myHeight: 10rem;
  --myRad: 2rem;
  clip-path: url(#clipped);
}

与使用border-radius设置为hidden隐藏相比，我发现这很有用，因为这种方法不会创建BFC或破坏粘滞位置和css透视效果。此外，如果需要，这允许您“插入”svg路径的位置以使用“角半径”在元素内部剪辑。

Answer 3

我没有评论选项是，所以我将其作为答案撰写..

你需要写尽可能多的积分才能到达拐角处。 Nothig别的...... 例如，还有几点可以让下半部分更圆：

-webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 25% 100%, 5% 70%,1% 60%, 0% 50%, 25% 0%);

哦，是的，或SVG评论人员在这里.. :)

Answer 4

剪切路径：插入（45％0％33％10％舍入10px）

Answer 5

SVG 过滤器可以舍入任何类型的 clip-path。您只需要将它应用到父元素。调整 stdDeviation 以控制半径：

.box {
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

.parent {
  filter: url('#goo');
  overflow:hidden;
  position: fixed;
  right:-50px;
  z-index: 1;
  margin-top: 10vw;
}

<div class="parent">
  <div class="box"></div>
</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

相关：https://stackoverflow.com/a/65485455/8620333

Answer 6

您可以使用子元素并对该子元素和子元素的伪元素执行嵌套的for f in $(awk { print cut -d'_' -f1 }' file2); do [[ "$f" == $2 ]] && mkdir -p "$f" /path/to/directory done。父对象将首先在形状上进行Directory2_2 19-0003-xxx-xxx-xxx_000-111 19-0004-xxx-xxx-xxx_000-111 19-0005-xxx-xxx-xxx_000-111剪辑，然后伪对象将具有clip-path来使边界变圆。这些剪辑将具有组合效果。

polygon

ellipse

以下是带有一些改编的演示，以说明正在发生的事情：

.parent, .parent div, .parent div:before {
  width: 423px;
  height: 90px;
  position: absolute;
}

.parent {
  right: 0;
  background-image: linear-gradient(to right, transparent 210px, #b0102d 210px);
  margin-top: 15vh;
}

.parent div {
  clip-path: polygon(100% 0%, 100% 100%, 25% 100%, 0 50%, 25% 0);
}

.parent div:before {
  content: "";
  background-color: #b0102d;
  clip-path: ellipse(200px 45px at 210px);
}

<div class="parent">
  <div></div>
</div>

椭圆的水平尺寸和位置可用于在边缘上获得不同的效果。请注意，父级的背景起始位置需要调整为与椭圆的位置相同的值（.parent, .parent div, .parent div:before { width: 423px; height: 90px; position: absolute; } .parent { right: 0; background-image: linear-gradient(to right, transparent 210px, yellow 210px); margin-top: 15vh; } .parent div { background-color: blue; clip-path: polygon(90% 0%, 90% 100%, 25% 100%, 0 50%, 25% 0); } .parent div:before { content: ""; background-color: #b0102d; clip-path: ellipse(200px 45px at 210px); }中的最后一个值），因为它会填满右侧剪切掉的所有内容。在第二个演示中，可以从<div class="parent"> <div></div> </div>中删除clip-path来可视化这一点。

Here是可以尝试的其他Codepen。

Answer 7

使用带有圆形属性的插图：

inset(0% 45% 0% 45% round 10px)

Answer 8

制作一个矩形剪辑，并在其上放置一个带圆角边框的粗矩形。祝你好运！

使用CSS剪辑路径时如何圆角

8 个答案: