Могу ли я создать неправильную форму ‹div›, используя только CSS?

Я хотел бы создать div в форме неправильного шестиугольника со всеми прямыми углами (подумайте о форме Юты, но не обязательно в этой ориентации).

Я видел несколько вопросов на StackExchange относительно неправильной формы кнопок (люди говорят, что нужно использовать изображение) и использования неправильных форм для треугольников (люди говорят, что используют обрезку), но пока ничего о неправильной форме с прямыми углами, как родительский или дочерний div. Возможно ли это, используя только один div в CSS / 3? Этот вопрос кажется многообещающим (я думаю), но я m все еще новичок в CSS и, похоже, больше внимания уделяет изображениям, чем просто контейнерным div (и я также не думаю, что был достигнут консенсус).

Или мне придется как-то разместить два div рядом друг с другом в духе этого ответа?


css css-shapes
person Community    schedule 10.02.2014    source источник
comment
CSS3 Shapes Обратите внимание на использование :before и :after, возможно, это может вам помочь.   -  person azeós    schedule 11.02.2014
comment
См. Мою правку к моему ответу; @ZachSaucier указал, как это сделать.   -  person elixenide    schedule 18.12.2014

Ответы (1)


arrow_upward
3
arrow_downward

Это будет невозможно с одним div, потому что div всегда будет прямоугольным. См. Отличный ответ здесь для более полного объяснения: Как создать div с неправильными формами с css3 и html5?

Изменить: это действительно возможно с помощью атрибут clip-path CSS, как любезно указал @ZachSaucier в комментариях. Демо Вы узнаете что-то новое каждый день!

person elixenide    schedule 10.02.2014
comment
Спасибо, Эд, я прочту это подробно. Я столкнулся с этим раньше, но проигнорировал его после беглого просмотра, потому что он казался очень специфичным в отношении типа функции формы / карты в OP (похоже на набор идеальных квадратов, наклоненных ко мне под углом). - person ; 11.02.2014
comment
По сути, это та же проблема. Ротация не является проблемой в новейших браузерах, потому что вы можете использовать повернуть трансформацию, но сделать все это как неправильную форму - проблема. - person elixenide; 11.02.2014
comment
Это неверно, поскольку есть способ сделать это с помощью clip-path - person Zach Saucier; 17.12.2014
comment
@ZachSaucier Я понятия не имел, что такое существует. Спасибо; Я обновлю свой ответ. - person elixenide; 17.12.2014
comment
Это также можно сделать с помощью псевдо или теневых элементов, но это элементы: P - person Zach Saucier; 17.12.2014
comment
Спасибо @EdCottrell за обновление. К сожалению, Firefox (мой основной браузер) еще не поддерживает эту часть clip-path, поэтому я отправляюсь в Chrome, чтобы проверить демо. - person ; 18.12.2014