使用混合线性梯度和径向梯度

Question

当悬停在图像上时，我正在尝试使用线性渐变和径向渐变作为背景生成形状。

我希望在悬停时显示以下形状（灰色的不透明度为 0.8）：

我编写了以下显示线条的 CSS，但我不知道如何使用径向渐变来显示顶部的圆形：

background: linear-gradient(70deg, rgba(34, 34, 34, 0.8) 60%, rgba(0,0,0,0) 60%), 
            linear-gradient(70deg, rgba(255, 255, 255, 0.8) 80%, rgba(0,0,0,0) 80%), 
            linear-gradient(70deg, rgba(34, 34, 34, 0.8) 100%, rgba(0,0,0,0) 100%)

Answer 1

我会这样做：

.box {
 height:200px;
 width:200px;
 border:1px solid;
 background: 
    radial-gradient(circle at 60% 80%, transparent 50%,red 51%) top center/60px 60px,
    linear-gradient(red,red) top left    /calc(50% - 60px/2) 60px,
    linear-gradient(red,red) top right   /calc(50% - 60px/2) 30px,
    linear-gradient(red,red) bottom left /calc(50% - 60px/2 + 8px) calc(100% - 60px),
    
    linear-gradient(to bottom left, transparent 49.5%,red 50%) 78px 100%/35% calc(100% - 60px),
    linear-gradient(to top right, transparent 49.5%,red 50%) 100% 29px/35% calc(100% - 60px);
 background-repeat:no-repeat;
    
}

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

为了更好地理解，让每个渐变用不同的颜色来查看拼图

.box {
 height:200px;
 width:200px;
 border:1px solid;
 background: 
    radial-gradient(circle at 60% 80%, transparent 50%,red 51%) top center/60px 60px,
    linear-gradient(green,green) top left    /calc(50% - 60px/2) 60px,
    linear-gradient(blue,blue) top right   /calc(50% - 60px/2) 30px,
    linear-gradient(yellow,yellow) bottom left /calc(50% - 60px/2 + 8px) calc(100% - 60px),
    
    linear-gradient(to bottom left, transparent 49.5%,purple 50%) 78px 100%/35% calc(100% - 60px),
    linear-gradient(to top right, transparent 49.5%,orange 50%) 100% 29px/35% calc(100% - 60px);
 background-repeat:no-repeat;
    
}

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

如果你不局限于只使用渐变，你可以结合一些变换和渐变：

.box {
 height:200px;
 width:200px;
 border:1px solid;
  position:relative;
  overflow:hidden;
}
.box:before {
  content:"";
  position:absolute;
  border-top:50px solid red;
  top:-30%;
  left:-30%;
  right:-30%;
  bottom:0;
  background: 
    radial-gradient(farthest-side at bottom, transparent 97%,red 99%) top/20% 15%,
    linear-gradient(red,red) left  /40% 100%,
    linear-gradient(red,red) right /40% 100%;
 background-repeat:no-repeat;
 transform: rotate(-24deg) translate(14px, 25px);
}

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