我想使用border-corner-shape属性来实现以下形状.但它不起作用.
我的代码如下：
.left-1 {
background-color: #3498DB;
border-corner-shape: scoop;
border-radius: 30px;
width: 200px;
height: 200px;
}
<div class="left-1"></div>
为什么不起作用？
解决方法
使用径向渐变：
这是使用径向渐变实现边角角落效果的另一种替代方法.在这种方法中,我们使用多个径向渐变并将它们定位在角落处.
.border-scoop {
height: 300px;
width: 300px;
background: -webkit-radial-gradient(0% 100%,circle,transparent 15%,steelblue 15%) no-repeat,-webkit-radial-gradient(100% 0%,-webkit-radial-gradient(0% 0%,-webkit-radial-gradient(100% 100%,steelblue 15%) no-repeat;
background: radial-gradient(circle at 0% 100%,radial-gradient(circle at 100% 0%,radial-gradient(circle at 0% 0%,radial-gradient(circle at 100% 100%,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,purple);
}
<div class="border-scoop"></div>
使用剪辑路径：
使用剪辑路径也可以实现Scooped边角效果.纯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,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,1 0.2,1
L0.8,1 A0.2,1 1,0.8
L1,0.2 A0.2,1 0.8,0z' />
</clipPath>
</defs>
</svg>
<div class='border-scoop'></div>
Box Shadow透明勺：
下面的片段是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,purple);
}
<div class="border-scoop"> <div class="inner"></div> </div>
