3

У меня есть два div с отдельным градиентным фоном, и мне нужно создать кривую S-Shape между ними.

введите сюда описание изображения

Вот пример скрипта для градиентных div: https://jsfiddle.net/JerryGoyal/rjyfc46c/2/

<div id="section1">

</div>
<div id="section2">

</div>
#section1{
  height:200px;
  background: linear-gradient(to bottom right, #ad3, #add);
}
#section2{
  height:200px;
  background: linear-gradient(to bottom right, #de350b, #0065ff);
}

Есть несколько вещей, которые пришли мне в голову, но:

  • svg: не знаю, как обращаться с другим градиентом div.

  • border-radius: не удалось получить истинную S-подобную кривую, и она становится уродливой, когда я изменяю размер экрана.

  • clip-path: не поддерживается некоторыми браузерами https://caniuse.com/css-clip-path

  • png image: нет! должен быть динамический контент.

P.S: необходимо прочитать для будущего решения https://css-tricks.com/creating-non-rectangular-headers/

1

1 ответ 1

3

Здесь решение с использованием linearGradient SVG

.container {
  width: 500px;
  height: 200px;
  background:linear-gradient(to bottom right, #de350b, #0065ff);
}
svg {
  width:100%;
}
<div class="container">
  <svg mlns='http://www.w3.org/2000/svg' viewBox="0 0 64 64">
    <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ad3" />
      <stop offset="100%" stop-color="#add" />
    </linearGradient>
  </defs>
    <path d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z'  fill="url(#grad)"/>
  </svg>
</div>

Здесь также полезный онлайн-инструмент для легкого редактирования фигуры (просто добавьте путь к URL-адресу для редактирования http://jxnblk.com/paths/?d=M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z )

Другая идея, с тем же SVG, который используется в качестве фона, поэтому вы можете легко обрабатывать контент над ним:

.container {
  width: 500px;
  height: 200px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="500" ><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ad3" /><stop offset="100%" stop-color="#add" /></linearGradient></defs><path d="M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z"  fill="url(#grad)"/></svg>'), 
  linear-gradient(to bottom right, #de350b, #0065ff);
  
  display:flex;
  justify-content:space-around;
  align-items:center;
  flex-direction:column;
  color:#fff;
}
<div class="container">
<p>TOP</p>
<p>BOTTOM</p>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.