Скругление блоков через css

229
29 мая 2017, 23:22

Как можно скруглить блоки средствами css чтобы получить примерно такой результат:

Пробовал использовать border-radius: 0 0 50% 50%;, но ничего не выходит, слишком большой радиус скругления. Есть идеи, может кто сталкивался?

Answer 1

Воспользуйтесь таким приемом:

border-radius: 0 0 50% 50% / 0 0 40px 40px;

До слеша задаются горизонтальные радиусы, после слеша - вертикальные. Можно задавать через shorthand-свойство border-radius, можно в отдельных свойствах:

border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 50% 40px;
border-bottom-left-radius: 50% 40px;

Подробнее о приеме (англ.)

.section { 
  background: #FBF3E6; 
  border-radius: 0 0 50% 50% / 0 0 40px 40px; 
  height: 200px; 
  margin-bottom: -40px; 
  overflow: hidden; 
  position: relative; 
} 
 
.section_orange { 
  background: #FFC100; 
  z-index: 2; 
} 
 
.section_pink { 
  background: #FE7A7C; 
  z-index: 1; 
} 
 
.section_green { 
  background: #02F55E; 
}
<div class="section section_orange"></div> 
<div class="section section_pink"></div> 
<div class="section section_green"></div>

Или посмотреть на jsfiddle

READ ALSO
Не видит код в css файле
HTML

Не видит код в css файле

Всем привет! Подскажите пожалуйста, столкнулся с такой проблемой, что страничка не видит мой код написанный на cssПредпологаю, что проблема...

 426
Шапка наезжает на контент и не адаптивная таблица
HTML

Шапка наезжает на контент и не адаптивная таблица

Здравствуйте!

 258
Не видит код css файла
HTML

Не видит код css файла

Всем привет! Страничка не видит код написанный на cssПредпологаю, что проблема в thymeleaf поскольку без него все работает

 499
Как очистить кэш у пользователей моего сайта
HTML

Как очистить кэш у пользователей моего сайта

Внес изменения на сайт, а картинки остались старыеЯ понимаю, что если почищу кэш у себя, то все будет в порядке

 355