Как сделать изогнутую форму градиентом?

Мне нужно создать подобное изображение с помощью CSS: - Как сделать изогнутую форму градиентом?

Если это невозможно, то как я могу использовать это с минимальным размером изображения? Как и в приведенном ниже коде, я использовал два изображения, но это тоже не работает ...

<div style = "background:url('https://i.stack.imgur.com/veeS8.png') no-repeat top center, url('https://i.stack.imgur.com/2i7ed.png') repeat-y top 50px center; widhth:100%; height:800px; background-size:100%;">

</div>

По этой ссылке введите описание ссылки здесь

— 30.03.2021 14:09

html css

30.03.2021 14:00

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 6

Вы можете использовать линейный градиент с радиусом границы

.gradient {
  height: 800px;
  background-image: linear-gradient(to right, #8684F2 0%, #1BEEE3 100%);
  border-top-right-radius: 50% 60px;
  border-top-left-radius: 50% 60px;
}

<div class = "gradient">

</div>

30.03.2021 14:15

Вы можете использовать CSS Gradient, чтобы получить такой результат. Вы также можете использовать некоторые онлайн-инструменты для создания таких градиентов, как этот: https://cssgradient.io/

.container {
  width: 500px;
  height: 500px;
  background: rgb(133,132,242);
background: linear-gradient(90deg, rgba(133,132,242,1) 0%, rgba(35,136,253,1) 50%, rgba(127,237,226,1) 100%);
}

<div class='container'>
  
</div>

30.03.2021 14:15

Ответ принят как подходящий

что-то вроде этого будет работать:

div.cont:before {
    content: '';
    background-image: url(https://i.stack.imgur.com/2i7ed.png);
    background-size: 100% auto;
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
}

<div class = "cont" style = "width: 100%;height:800px;background-image: url(https://i.stack.imgur.com/veeS8.png);background-size: 100% auto;background-repeat: no-repeat;position: relative;">

</div>

Спасибо @bee за ваши старания ...

— 30.03.2021 14:37

30.03.2021 14:16

.element {
    width: 200px;
    height: 200px;
    border-radius: 100% 100% 0 0 / 20% 20% 0 0;
    background-image: linear-gradient(to right, #8684F2 0%, #1BEEE3 100%);
}

30.03.2021 14:29

Также возможно с маскированием без использования изображения. Это более гибко. Вы можете легко контролировать наклон, изменяя переменную.

.container {
  --slope: 100px;
  width: 100%;
  height: 500px;
  --mask: radial-gradient(farthest-side, #000 99%, transparent 100%) 50% 0 / 150% calc(var(--slope) * 2) no-repeat, 
          linear-gradient(#000, #000) 0 100% / 100% calc(100% - var(--slope)) no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: linear-gradient(90deg, rgba(133, 132, 242, 1) 0%, rgba(35, 136, 253, 1) 50%, rgba(127, 237, 226, 1) 100%);
}

<div class='container'></div>

30.03.2021 14:41

тривиальная задача с использованием clip-path

.container {
  height: 400px;
  background: linear-gradient(90deg, rgba(133,132,242,1), rgba(35,136,253,1), rgba(127,237,226,1));
  clip-path:ellipse(90% 100% at bottom); /* simply adjust the 90% */
}

<div class='container'></div>

Чтобы иметь такую же кривизну при изменении размера, используйте значение в пикселях

.container {
  height: 400px;
  max-width:800px;
  background: linear-gradient(90deg, rgba(133,132,242,1), rgba(35,136,253,1), rgba(127,237,226,1));
  clip-path:ellipse(600px 100% at bottom);
}