边框角形勺不工作 [英] Border corner shape scoop doesn't work

问题描述

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

我的代码如下：

  .left-1 {background-color：＃3498DB; border-corner-shape是什么意思：scoop; border-radius：30px; width：200px; height：200px;}  

 < div class = -1>< / div>  

不工作？

解决方案

使用径向渐变：

这里是使用径向梯度实现边界角勺效应的另一种替代方法。在这种方法中，我们使用多个径向渐变并将它们定位在角落。

  .border-scoop {height：300px; width：300px;背景：-webkit径向梯度（0％100％，圆形，透明15％，钢蓝15％）无重复，-webkit径向梯度（100％0％，圆形，透明15％，钢蓝15％无重复，-webkit径向梯度（0％0％，圆形，透明15％，钢蓝15％），无重复，-webkit-径向梯度（100％100％，圆形，透明15％，钢蓝15 ％）无重复;背景：径向梯度（在0％100％，圆形透明15％，钢蓝15％）无重复，径向梯度（在100％0％，透明15％，钢蓝15％梯度（0％0％的圆，透明15％，钢蓝15％）无重复，径向梯度（在100％100％，透明15％，钢蓝15％背景位置：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>  

b

---

使用剪辑路径：

也可以使用 clip-path 来实现。纯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>  

/ p>

---

透过Box Shadow透明勺子：

下面的代码段是一个 GCyrillus的答案变体，它需要一个额外的元素，但即使页面的背景不是纯色，也会工作。

必须注意的是，box shadow比径向渐变有更好的浏览器支持。

  .border-scoop {height：300px; width：300px;位置：相对; overflow：hidden;}。inner {position：absolute; top：0px; left：0px;高度：100％; width：100％;}。border-scoop：before，.border-scoop：after，.inner：after，.inner：before {position：absolute; content：'';身高：30％宽度：30％; border-radius：50％;背景：透明; box-shadow：0px 0px 0px 210px steelblue; } .border-scoop：before {top：-15％; left：85％;}。border-scoop：after {top：-15％;左：-15％;}。左：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>  

I want to achieve the below shape using border-corner-shape property. But it doesn't work.

My code is available below:

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

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

Why does it not work?

解决方案

Using Radial Gradients:

Here is another alternative method to achieve the border corner scoop effect using radial gradients. In this method, we use multiple radial gradients and position them at the corners.

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

---

Using Clip Path:

Scooped border corner effect can also be achieved using clip-path. Pure CSS version supports only basic shapes (circle, polygon, ellipse etc) and does not support a path or combination of shapes but SVG (inline/external) can be used.

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

---

Transparent scoop with Box Shadow:

The below snippet is a variant of GCyrillus' answer which needs an extra element but would work even if the background of the page is not a solid color. This method however still has the same fixed and known size limitation that is mentioned in the other answer.

It must be noted that box shadow has much better browser support than radial gradients.

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

这篇关于边框角形勺不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！