Border corner shape scoop doesn't work

问题:

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?

回答1:

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>

回答2:

This feature (border-corner-shape : curve | scoop | bevel | notch) has not been implemented (it is experimental) yet so it is not applicable in any of the existing browsers.

回答3:

If the box has known and fixed size, you can fake it with one pseudo-element and box-shadow, and even draw curved borders :

DEMO HTML :

<div class="scoop">
  <p>another single div shaped</p>
</div>
<div class="scoop border">
  <p>another single div shaped</p>
</div>

CSS:

.scoop {
  position:relative;
  height:200px;
  width:200px;
  overflow:hidden;
}
body {
  background:#F3F3F3;/* color reused in pseudo element */
}
.scoop:before{
  content:'';
  position:absolute;
  left:0;
  margin:-20px;
  height:40px;
  width:40px;
  border-radius:100%;
  background:#F3F3F3;
  box-shadow:200px 0 0 #F3F3F3,
    0 200px 0 #F3F3F3,
    200px 200px 0 #F3F3F3,
    0 0 0 500px #2798DE;/* here we draw background-color of parent */
}

div > * {
  margin:auto;
  position:relative;/* to draw on top of shadowed pseudo element */
}

and to draw borders as well , let's add some extra shadows:

div.border {
  box-shadow:
    23px  0 0 -20px,/* 23px =>(towards right) width of pseudo seen + fakeborder width 0 0 -20px => reduce size shadow of 20px */ 
    -23px  0 0 -20px,
    0  23px  0 -20px,
    0  -23px  0 -20px;
}
div.border:before {
  box-shadow: 
    0 0 0 3px,/* draw 3px unblured shadow */
    200px 0 0 #F3F3F3,/* mask of main background-color */ 
   200px 0 0 3px ,
    0 200px 0 #F3F3F3,
    0 200px 0 3px,
    200px 200px 0 #F3F3F3,
    200px 200px 0 3px,
    0 0 0 500px #2798DE;
}