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

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

0 голосов
/ 08 мая 2018

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

gradient

Что у меня так далеко:

attempt

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

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

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

Ответы [ 3 ]

0 голосов
/ 08 мая 2018

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

Если посмотреть на радиальный градиент на 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>
0 голосов
/ 08 мая 2018

Вам также необходимо отрегулировать 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;
}

UPDATE

Если это 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%);
 }
...