Как я могу изменить кривую радиального градиента в CSS?

Я пытаюсь добиться этого градиента. Чего я не понимаю, так это его кривизны, и я не уверен, как это воспроизвести:

Как я могу изменить кривую радиального градиента в CSS?

Что у меня есть на данный момент:

Как я могу изменить кривую радиального градиента в CSS?

и мой код для градиента:

radial-gradient(at top left,#629a92 36%,#02d2a0 67%, #fff 11%)

Однако я не уверен, как это растягивается до конца экрана. Раньше я не очень много использовал radial-gradient, поэтому чувствую, что чего-то не хватает. Любая помощь будет принята с благодарностью. Спасибо.

Вы проверили источник сайта, который пытаетесь воспроизвести?

jhpratt 08.05.2018 17:30

Возможно, для этого лучше подойдет SVG.

ecg8 08.05.2018 17:31

@jhpratt это дизайн, который мне подарили.

nyphur 08.05.2018 17:38
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
4
3
2 004
3

Ответы 3

Вам также необходимо настроить 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 08.05.2018 17:41

@TylerH да исправлено, это было из-за последней остановки цвета

Temani Afif 08.05.2018 17:45

Вот скриншот того, что я имею в виду. i.stack.imgur.com/efUE8.png. Думаю, именно так Firefox и IE реализуют радиальный градиент.

TylerH 08.05.2018 17:47

@TylerH да, потому что градиент не сглаживается, и чтобы исправить это, нам нужно сохранить небольшую разницу между последними цветами, теперь все должно быть в порядке

Temani Afif 08.05.2018 17:49

@ Spacebear5000 Я обновил свой ответ, если вам нужен линейный градиент внутри изогнутой формы;)

Temani Afif 08.05.2018 20:34

Если вы посмотрите внимательно, это не радиальный градиент. Это линейный градиент внутри радиальной формы. На вашем месте я бы сделал фигуру 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>

Другие вопросы по теме