html - 边 Angular 形状勺子不起作用

Question

我想使用 border-corner-shape 属性实现下面的形状。但它不起作用。

我的代码如下:

.left-1 {
   background-color: #3498DB;
   border-corner-shape: scoop;
   border-radius: 30px;
   width: 200px;
   height: 200px;
}

<div class="left-1"></div>

为什么不起作用？

Answer 1

使用径向渐变:

这是另一种使用径向渐变实现边框 Angular 勺效果的替代方法。在这种方法中，我们使用多个径向渐变并将它们定位在 Angular 落。

.border-scoop {
  height: 300px;
  width: 300px;
  background: -webkit-radial-gradient(0% 100%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(100% 0%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(0% 0%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(100% 100%, circle, transparent 15%, steelblue 15%) no-repeat;
  background: radial-gradient(circle at 0% 100%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 100% 0%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 0% 0%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 100% 100%, transparent 15%, steelblue 15%) no-repeat;
  background-position: 0% 100%, 100% 0%, 0% 0%, 100% 100%;
  background-size: 75% 75%;
}
body {
  background: -webkit-linear-gradient(90deg, crimson, indianred, purple);
  background: linear-gradient(90deg, crimson, indianred, purple);
}

<div class="border-scoop"></div>

---

使用剪辑路径:

也可以使用clip-path 实现挖 Angular 边框效果。纯 CSS 版本仅支持基本形状(圆形、多边形、椭圆形等)，不支持路径或形状组合，但可以使用 SVG(内联/外部)。

.border-scoop {
  width: 200px;
  height: 200px;
  background-color: #3498DB;
  -webkit-clip-path: url(#scoop);
  clip-path: url(#scoop);
}
body {
  background: -webkit-linear-gradient(90deg, crimson, indianred, purple);
  background: linear-gradient(90deg, crimson, indianred, purple);
}

<svg width='0' height='0'>
  <defs>
    <clipPath id='scoop' clipPathUnits='objectBoundingBox'>
      <path d='M0.2,0 A0.2,0.2 0 0,1 0,0.2 
                     L0,0.8 A0.2,0.2 0 0,1 0.2,1
                     L0.8,1 A0.2,0.2 0 0,1 1,0.8
                     L1,0.2 A0.2,0.2 0 0,1 0.8,0z' />
    </clipPath>
  </defs>
</svg>
<div class='border-scoop'></div>

---

带框阴影的透明勺子:

下面的代码片段是GCyrillus 答案的变体，它需要一个额外的元素，但即使页面背景不是纯色也能正常工作。但是，此方法仍然具有其他答案中提到的相同的固定和已知大小限制。

必须注意的是，框阴影比径向渐变具有更好的浏览器支持。

.border-scoop{
  height: 300px;
  width: 300px;
  position: relative;
  overflow: hidden;
}
.inner{
  position: absolute;
  top: 0px; left: 0px;
  height: 100%;
  width: 100%;
}
.border-scoop:before, .border-scoop:after, .inner:after, .inner:before{
  position: absolute;
  content: '';
  height: 30%; width: 30%;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0px 0px 0px 210px steelblue;  
}
.border-scoop:before{
  top: -15%; left: 85%;
}
.border-scoop:after{
  top: -15%; left: -15%;
}
.inner:after{
  top: 85%; left: 85%;
}
.inner:before{
  top: 85%; left: -15%;
}

body{
  background: -webkit-linear-gradient(90deg, crimson, indianred, purple);
  background: linear-gradient(90deg, crimson, indianred, purple);
}

<div class="border-scoop">
  <div class="inner"></div>
</div>