Как сделать такую форму для бэкграунда блока?

Question

[nluparev]

Как сделать такую форму контейнера блока что бы углы имели border-radius а верхний правый угол был выше верхнего левого? обратите внимание что там так же имеется тень

Answer 1

[Максим]

jsfiddle.net/s67wxfLd/1 так ?
jsfiddle.net/s67wxfLd/2 вот так если надо встречное ответку сделать

Comments

[nluparev]

Максим Ленский огонь. теперь как сделать drop shadow и засунуть контент внутрь?

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

nluparev, jsfiddle.net/s67wxfLd/3 контент, jsfiddle.net/s67wxfLd/4 тень

[Максим]

nluparev, jsfiddle.net/s67wxfLd/5 вот так к примеру

[lukoie]

Заметили что округление на стороне, которая короче, некрасиво смотрится? Потому что безье на разных размерах непропорциональные. Я б делал двумя половинками, чтоб скругления были одинаковые.

Answer 2

[RAX7]

Если сильно упороться, то можно что-то типа такого соорудить:

Comments

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

супер конечно, но что делать с поддержкой clip-path? Вариант Максим Ленский с svg проще и более работоспособен. Ваш интересен, но в разрезе спортивной дисциплины.

[RAX7]

Максим Тимофеев, мне самому было интересно сделать вариант без svg, просто ради спортивного интереса. Даже при 100% поддержке clip-path этот вариант криво отображается в firefox и возможно других не хромовых браузерах. Тени от блоков то накладываются на 1px, то между ними пробел в 1px. Возможно кто предложит вариант лучше на чистом css.
С svg другая дилемма: как сделать чтобы контент растягивал блок по высоте и при этом не растягивал скругления улов.

[Виталий]

Попробуйте https://github.com/andrusieczko/clip-path-polygon, возможно есть варианты полифилов и без jquery

Answer 3

[vpolets]

Или так)

Answer 4

[Rikonardo]

div{
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
          clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}

Взято тут.

Comments

[nluparev]

Rikonardo пробовал. как решить вопрос с округлеными краями?

[Rikonardo]

Хмм... Как я понял, в народе это делают так: jsfiddle.net/7moh8c1s
Понимаю, что костыльно, но похоже другого способа нет.
UPD: Попробуйте поискать генераторы clip-path как этот или этот, и сделать с помощью них.
UPD UPD: Возможен способ реализации подобного при помощи вращения блока в 3D, а текст поверх - другой блок с настроенным position.

[nluparev]

Rikonardo, дело в том что я ходил похожим путем и упирался как раз в аккуратные закругления краев. довольно много кода для закруглений. Решил попробовать через svg

Answer 5

[lukoie]

А там точно статика? Потому что я делал такой эффект на ховер, что блок под мышкой меняет положение по вертикальной оси.

Comments

[alex-1917]

насчет ховера автор еще задаст свой ТРЕТИЙ подвопрос, ждемс...)))
Тостер - не сервис помощи, а кофейня с услугами разжевывания и в рот засовывания.

Answer 6

[dom1n1k]

Это нужно делать SVG-шейпом и никак иначе.
Всякие извращенские варианты с псевдоэлементами и skew даже не рассматривать.