Волнистые края у блока DIV

@Лилёк · Регистрация: 10.05.2012

Author24 — интернет-сервис помощи студентам

Здравствуйте! Подскажите, пожалуйста, есть ли возможность сделать верхнюю линию - волнистой, как на картинке, у блока DIV? Использую только CSS, без картинки узора.

@BlacKCheT · 26.11.2018, 08:07

повторяющийся бэкграунд, овал в фотошопе нарисуйте

@BlacKCheT · 26.11.2018, 08:10

Вот

@BlacKCheT · 26.11.2018, 08:10

result

@Лилёк · 26.11.2018, 09:52 **[ТС]**

BlacKCheT, c картинкой в background то всё понятно. Хотелось узнать, можно ли это сделать, чисто средствами CSS.

@BlacKCheT · 26.11.2018, 12:08

Ну тогда только Canvas'ом в JS

@mrtoxas · 26.11.2018, 12:46

HTML5

1	<div class='wave'></div>

CSS

.wave{
  background:
    linear-gradient(to right, sandybrown, chocolate);
  height: 50px;
  position: relative;
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 10px;
  background-size: 20px 20px;
  background-image:
    radial-gradient(circle at 10px -5px, transparent 12px, aquamarine 13px);
}
.wave::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 15px;
  background-size: 40px 20px;
  background-image:
    radial-gradient(circle at 10px 15px, aquamarine 12px, transparent 13px);
}

https://stackoverflow.com/ques... der-in-css

@BlacKCheT · 27.11.2018, 09:31

Да, это жЕс_ка!

@Лилёк 2 / 2 / 0 Регистрация: 10.05.2012 Сообщений: 141
		1
	Волнистые края у блока DIV 25.11.2018, 16:33. Показов 9313. Ответов 7 Метки нет (Все метки) Здравствуйте! Подскажите, пожалуйста, есть ли возможность сделать верхнюю линию - волнистой, как на картинке, у блока DIV? Использую только CSS, без картинки узора. Миниатюры 0

@BlacKCheT Лучше не лучше, но лучше. 16 / 14 / 3 Регистрация: 11.03.2018 Сообщений: 422
	26.11.2018, 08:07	2
	повторяющийся бэкграунд, овал в фотошопе нарисуйте 0

@BlacKCheT Лучше не лучше, но лучше. 16 / 14 / 3 Регистрация: 11.03.2018 Сообщений: 422
	26.11.2018, 08:10	3
	Вот Изображения 0

@BlacKCheT Лучше не лучше, но лучше. 16 / 14 / 3 Регистрация: 11.03.2018 Сообщений: 422
	26.11.2018, 08:10	4
	result Миниатюры 0

@Лилёк 2 / 2 / 0 Регистрация: 10.05.2012 Сообщений: 141
	26.11.2018, 09:52 [ТС]	5
	BlacKCheT, c картинкой в background то всё понятно. Хотелось узнать, можно ли это сделать, чисто средствами CSS. 0

@BlacKCheT Лучше не лучше, но лучше. 16 / 14 / 3 Регистрация: 11.03.2018 Сообщений: 422
	26.11.2018, 12:08	6
	Ну тогда только Canvas'ом в JS 0

@BlacKCheT Лучше не лучше, но лучше. 16 / 14 / 3 Регистрация: 11.03.2018 Сообщений: 422
	27.11.2018, 09:31	8
	Да, это жЕс_ка! 0

Волнистые края у блока DIV

Решение