Bозможности css3

[kamaz6141]

Добрый день, задался вопросом)) можно ли реализовать такую форму блока без использования нарезок графики при помощи css3?

[SelenIT]

С дополнительным элементом точно можно. Можно ли одним элементом (м.б. с псевдиком) - надо подумать, вроде тоже варианты должны быть.

[Hol1killer]

Да можно но смысла нету проще сдеать это img и поместить в блок, а так придется использовать border-radius и box-shadow, так что думаю не стоит выполнять это в css3,если есть проще вариант!

Edited March 14, 2012 by Hol1killer

[wildhind]

С дополнительным элементом точно можно. Можно ли одним элементом (м.б. с псевдиком) - надо подумать, вроде тоже варианты должны быть.

С дополнительным элементом, чтобы тень была одна на два элемента?

Edited March 14, 2012 by wildhind

[kamaz6141]

С дополнительным элементом точно можно. Можно ли одним элементом (м.б. с псевдиком) - надо подумать, вроде тоже варианты должны быть.

С дополнительным элементом, чтобы тень была одна на два элемента?

Одна, задумка была такова)

Edited March 14, 2012 by kamaz6141

[SelenIT]

чтобы тень была одна на два элемента?

Визуально. Физически, конечно, придется стыковать две, но на беглый взгляд это осуществимо (хотя и не запросто - пока не представляю, как обойтись без обрезки излишков обертками с overflow:hidden...).

[wildhind]

если даже так и сделать, то тени будут накладываться одна на другую, а визуально это баг багом.

[SelenIT]

Поэтому и придется обрезать излишки. Так что минимум два элемента с overflow: hidden, в каждом по псевдику с запасом по размеру и тенью (видимо, у одного внешней, у другого внутренней). И подгонять по пикселю.

С инлайновым SVG, конечно, всё намного проще...

[Nanto]

http://jsfiddle.net/qTeHA/1/

Один косяк - нельзя использовать transparent у псевдоэлемента, поэтому надо подогнять бэкграунд под цвет body. Это критично?

Поэтому и придется обрезать излишки. Так что минимум два элемента с overflow: hidden, в каждом по псевдику с запасом по размеру и тенью (видимо, у одного внешней, у другого внутренней). И подгонять по пикселю.

С инлайновым SVG, конечно, всё намного проще...

Отчего-то в вёрстке очень непопулярно интересное свойство clip...

[kamaz6141]

http://jsfiddle.net/qTeHA/1/

Один косяк - нельзя использовать transparent у псевдоэлемента, поэтому надо подогнять бэкграунд под цвет body. Это критично?

Поэтому и придется обрезать излишки. Так что минимум два элемента с overflow: hidden, в каждом по псевдику с запасом по размеру и тенью (видимо, у одного внешней, у другого внутренней). И подгонять по пикселю.

С инлайновым SVG, конечно, всё намного проще...

Отчего-то в вёрстке очень непопулярно интересное свойство clip...

что то ссыль не открыватся

[alexandr_v-vich]

http://jsfiddle.net/qTeHA/1/

Один косяк - нельзя использовать transparent у псевдоэлемента, поэтому надо подогнять бэкграунд под цвет body. Это критично?

Поэтому и придется обрезать излишки. Так что минимум два элемента с overflow: hidden, в каждом по псевдику с запасом по размеру и тенью (видимо, у одного внешней, у другого внутренней). И подгонять по пикселю.

С инлайновым SVG, конечно, всё намного проще...

Отчего-то в вёрстке очень непопулярно интересное свойство clip...

что то ссыль не открыватся

Это сайт

[wildhind]

http://jsfiddle.net/qTeHA/1/

Один косяк - нельзя использовать transparent у псевдоэлемента, поэтому надо подогнять бэкграунд под цвет body. Это критично?

Отчего-то в вёрстке очень непопулярно интересное свойство clip...

Данный конкретный пример — не образец совершенства, но самая идея безмерно крута. Спасибо.

[SelenIT]

Да, clip что-то вылетело из головы (но ведь чуял нутром, что скорее всего можно). Nanto, спасибо!

Кстати, для однотонной заливки уголка можно и одним псевдиком обойтись.

А с парой псевдиков можно и для неоднотонной заливки body.