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

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>