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

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>