Я пытаюсь добиться этого градиента. Чего я не понимаю, так это его кривизны, и я не уверен, как это воспроизвести:
Что у меня есть на данный момент:
и мой код для градиента:
radial-gradient(at top left,#629a92 36%,#02d2a0 67%, #fff 11%)
Однако я не уверен, как это растягивается до конца экрана. Раньше я не очень много использовал radial-gradient
, поэтому чувствую, что чего-то не хватает. Любая помощь будет принята с благодарностью. Спасибо.
Возможно, для этого лучше подойдет SVG.
@jhpratt это дизайн, который мне подарили.
Вам также необходимо настроить background-size
градиента:
body {
height:100vh;
margin:0;
background-image:radial-gradient(at top left,#629a92 36%,#02d2a0 67%, transparent 67.5%);
background-size:120% 100%;
background-repeat:no-repeat;
}
Или отрегулируйте радиус:
body {
height:100vh;
margin:0;
background-image:radial-gradient(120% 100% at top left,#629a92 61%,#02d2a0 92%, transparent 92.5%);
background-repeat:no-repeat;
}
ОБНОВИТЬ
Если это linear-gradient
внутри изогнутой формы, вы можете попробовать использовать несколько фонов. Идея состоит в том, чтобы создать linear-gradient
, а над ним добавить radial-gradient
с прозрачным цветом, чтобы можно было видеть первый градиент.
body {
height:100vh;
margin:0;
background-image:
radial-gradient(120% 100% at top left,transparent 92%, #fff 92.5%),
linear-gradient(135deg, #51a595 0%, #3fcfa2 100%);
}
В Firefox и IE это довольно явный шаг вперед.
@TylerH да исправлено, это было из-за последней остановки цвета
Вот скриншот того, что я имею в виду. i.stack.imgur.com/efUE8.png. Думаю, именно так Firefox и IE реализуют радиальный градиент.
@TylerH да, потому что градиент не сглаживается, и чтобы исправить это, нам нужно сохранить небольшую разницу между последними цветами, теперь все должно быть в порядке
@ Spacebear5000 Я обновил свой ответ, если вам нужен линейный градиент внутри изогнутой формы;)
Если вы посмотрите внимательно, это не радиальный градиент. Это линейный градиент внутри радиальной формы. На вашем месте я бы сделал фигуру SVG - моя просто для примера - и применил ее к градиенту.
Как это:
body {
margin: 0;
}
svg {
width: 0;
height: 0;
display: block;
}
.main {
width: 100%;
height: 100vh;
position: relative;
}
.main:before {
content: '';
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
background: #51a595;
background: linear-gradient(135deg, #51a595 0%, #3fcfa2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51a595', endColorstr='#54bb9b',GradientType=1 );
-webkit-clip-path: url("#mask");
clip-path: url("#mask");
}
<svg>
<defs>
<clipPath id = "mask">
<ellipse cx = "0" cy = "-1400" rx = "2200" ry = "1500"></ellipse>
</clipPath>
</defs>
</svg>
<div class = "main"></div>
Если посмотреть на радиальный градиент на mdn, его размер может занять 2 процента до at top left
. Мы можем сделать первый больше 100%, чтобы он выходил за пределы экрана по оси x, и поместим второй процент на 100%, чтобы он заканчивался внизу.
radial-gradient(
200% 100% at top left,
#629a92 36%,
#02d2a0 67%,
#fff 11%
);
Это должно привести к тому, что вы ищете
.head {
width: 100%;
height: 200px;
background: radial-gradient(
200% 100% at top left,
#629a92 36%,
#02d2a0 67%,
#fff 11%
)
}
.body {
height: 200px;
width: 100%;
}
<div class = "head"></div>
<div class = "body"></div>
Вы проверили источник сайта, который пытаетесь воспроизвести?