С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.83/47: Рейтинг темы: голосов - 47, средняя оценка - 4.83
2 / 2 / 0
Регистрация: 10.05.2012
Сообщений: 141
1

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

25.11.2018, 16:33. Показов 9424. Ответов 7
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Здравствуйте! Подскажите, пожалуйста, есть ли возможность сделать верхнюю линию - волнистой, как на картинке, у блока DIV? Использую только CSS, без картинки узора.
Миниатюры
Волнистые края у блока DIV  
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.11.2018, 16:33
Ответы с готовыми решениями:

круглые края div
знаю что уже обсуждалось но поискал не нашел как сделать круглые края у div заранее блогадарен

Размещение нескольких блоков div внутри другого блока div
Хочу сделать шапку веб-страницы. Прикреплю ниже небольшую схему того, как она будет выглядеть. Хочу...

Залипание блока div в html далее содержимого блока
Подскажите пожалуйста, несколько дней не могу найти. Нужно div прилепить к верху после прокрутки...

Как в div загружать страницы из другого блока div?
Здравствуйте. Кто сможет помочь мне в одном вопросе? Как можно загрузить по ссылке страницу из...

7
Лучше не лучше, но лучше.
16 / 14 / 3
Регистрация: 11.03.2018
Сообщений: 422
26.11.2018, 08:07 2
повторяющийся бэкграунд, овал в фотошопе нарисуйте
0
Лучше не лучше, но лучше.
16 / 14 / 3
Регистрация: 11.03.2018
Сообщений: 422
26.11.2018, 08:10 3
Вот
Изображения
 
0
Лучше не лучше, но лучше.
16 / 14 / 3
Регистрация: 11.03.2018
Сообщений: 422
26.11.2018, 08:10 4
result
Миниатюры
Волнистые края у блока DIV  
0
2 / 2 / 0
Регистрация: 10.05.2012
Сообщений: 141
26.11.2018, 09:52  [ТС] 5
BlacKCheT, c картинкой в background то всё понятно. Хотелось узнать, можно ли это сделать, чисто средствами CSS.
0
Лучше не лучше, но лучше.
16 / 14 / 3
Регистрация: 11.03.2018
Сообщений: 422
26.11.2018, 12:08 6
Ну тогда только Canvas'ом в JS
0
Эксперт JSЭксперт HTML/CSS
3826 / 2676 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
26.11.2018, 12:46 7
Лучший ответ Сообщение было отмечено Лилёк как решение

Решение

HTML5
1
<div class='wave'></div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.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
1
Лучше не лучше, но лучше.
16 / 14 / 3
Регистрация: 11.03.2018
Сообщений: 422
27.11.2018, 09:31 8
Да, это жЕс_ка!
0
27.11.2018, 09:31
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
27.11.2018, 09:31
Помогаю со студенческими работами здесь

Текст не позиционируется относительно верхнего края блока
Такой момент, у меня текст не позиционируется относительно верхнего края блока div. Т.е. я...

Расстояние от края блока до края блока
document.getElementsByClassName(cmid).getBoundingClientRect().top - data.header.height() - 10 ...

Изменение позиции блока относительно левого края
есть блок body в котором расположен весь конетент, и нужно что бы он был по центру, конечно же...

Как засунуть 4 блока div в другой div
Есть футер, надо в него засунуть 4 дива, 100% высоты, 3 из них 23% ширины, 4й 31%.... Почему то...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru