Закругленные края у фона?

Question

[Smeecy Smeecy]

Можно ли сделать однотонный фон с верхними закругленными краями?
- Не используя background-image. Через border-radius не выходит.

Пример.

Answer 1

[Максим Тимофеев]

Можно ли сделать однотонный фон

У Вас градиент, он не однотонный. С однотонным получилось бы.

Comments

[Smeecy Smeecy]

Эмм ну можно просто background-у поставить Linear-gradient , а как вы хотели с однотонным скруглить?

[Максим Тимофеев]

Smeecy Smeecy: наверное надо svg делать

[Smeecy Smeecy]

Максим Тимофеев: вообщем легче фон поставить)

[Максим Тимофеев]

Smeecy Smeecy: c однотонным все просто:
https://jsfiddle.net/o7b4y2jg/

[Smeecy Smeecy]

Максим Тимофеев: ну почему же , вполне подойдет и под мой вариант! Спасибо

[Максим Тимофеев]

Smeecy Smeecy: Градиент не закруглиться. Он его обрежет.

[Smeecy Smeecy]

Максим Тимофеев: хмм , ну да, обрезает , ну ладно буду делать через задний фон

[Сергей Горячев]

Максим Тимофеев: https://jsfiddle.net/webirus/yw6pfpva/3/

[Exploding]

Сергей Горячев: только overflow-x: hidden; еще добавить чтобы моб. валидацию проходило.

[Максим Тимофеев]

Сергей Горячев: Я про shadow не подумал, 5 баллов

[Сергей Горячев]

Exploding: в моей фреймворке по умолчанию для body, поэтому забыл, да, он тут нужен.

Answer 2

[Сергей Горячев]

https://jsfiddle.net/webirus/yw6pfpva/3/
Радиус закругления не приводил к оригинальному виду, просто как пример.
Через width и height для before можно сделать pixel perfect.

Answer 3

[Exploding]

А так не?

Ну это так на скорую... но еще подпилить немного с высотами там...

#oval {
	width: 90vw;
	height: 90vh;
	background: -moz-linear-gradient(top,  rgba(193,193,193,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top,  rgba(193,193,193,1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,  rgba(193,193,193,1) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#00ffffff',GradientType=0 );
	border-radius: 40% 40% 0 0;
}

фидэлъ

А вообще решение этого: берем в цсс овалу цепляем прицеп спереди и прицеп сзади, в виде псевдо-элементов :before :after (бэлы савсэм бэлы блок) и у каждого эл-та делаем закругление одного угла. Вот и все дела:)
Мне некогда просто ваять это, выталкивают за арбузом идти...

Comments

[Smeecy Smeecy]

не

[Exploding]

Smeecy Smeecy: еще раз перечитайте, изменил там немного текст...

[Exploding]

В общем приду с арбузом))) Если никто не сделает раньше - сделаю)))

Answer 4

[Ilya Smirnov]

Comments

[Smeecy Smeecy]

через border-radius получается слишком округло а не плавно...

[Кирилл]

Smeecy Smeecy: а попробуйте ширину побольше задать блоку с border-radius =)