Использование смешанного линейного градиента и радиального градиента

Я пытаюсь создать форму, используя linear-gradient и radial-gradient для фона при наведении курсора на изображение.

Я хочу, чтобы при наведении курсора отображалась следующая форма (у серого цвета непрозрачность 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%)

css radial-gradients linear-gradients css-shapes
person RustyIngles    schedule 10.09.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я бы сделал это так, как показано ниже:

.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>

person Temani Afif    schedule 10.09.2019