Формы CSS3 — что возможно?

Я смотрю только на браузеры последнего поколения:

  • IE9 (на самом деле не разу не смотрел на это)
  • FF4
  • Chrome10
  • Сафари5
  • iOS 3.4
  • Опера?

Я знаю, что могу легко получить квадраты и прямоугольники, круги и многоточие с закругленными границами (круги: W=H, многоточие: W!=H). Я знаю, что могу получить откосы с настройками границ. Я знаю, как получить 1/2 и 1/4 круга, но возможно ли получить:

  • Круговой клин (любого размера, в любом месте круга? т. е. 18% клин, 20% отклонение от горизонтали)
  • Трапеции, восьмиугольник, пятиугольник, шестиугольник
  • Звезды (n остроконечных звезд)
  • Любые отдельные формы в этом, которые еще не упоминались.

Я ищу параметры CSS + DIV, а не параметры <canvas>. Я также ищу варианты, которые используют наименьшее количество вложенных элементов div. Вот пример, который показывает несколько фигур в одном примере...


css css-shapes
person Justin808    schedule 06.04.2011    source источник
comment
Почему, ну почему вы пытаетесь сделать это с помощью прямого HTML/CSS? Он действительно не предназначен для этого. Используйте Canvas, SVG, ЧТО-НИБУДЬ еще.   -  person Mark Kahn    schedule 06.04.2011
comment
@cwolves - я не хочу использовать <canvas>, потому что такие вещи, как $('#buttonTop').click() не будут работать только для частей нарисованного изображения на холсте, тогда как я могу нацеливаться на отдельные части объекта при использовании DIV. SVG могут быть ориентированы на подразделы всего объекта, но на самом деле я не столько рисую изображения, сколько создаю элементы интерфейса.   -  person Justin808    schedule 07.04.2011
comment
да, но вы строите панель управления звездного пути... некоторые из этих фигур будут настоящей PITA с HTML/CSS, в любом другом случае они были бы простыми. Даже простое создание изображения и сопоставление всего этого было бы логичнее! :)   -  person Mark Kahn    schedule 07.04.2011
comment
Если вы используете холст для каждого виджета, вы можете легко связать событие щелчка (и вы можете проверить, находится ли мышь над нарисованным виджетом или пустым пикселем, используя getImageData). Да, и Canvas поддерживается везде (даже в мобильных устройствах и даже в IE6 через excanvas), и его поддержка довольно стабильна во всех реализациях. Я не могу сказать то же самое о HTML/CSS (требуются хаки для конкретных поставщиков, а некоторые свойства не поддерживаются IE) или SVG (к сожалению, мобильных устройств нет).   -  person framp    schedule 24.05.2012
comment
Этот вопрос довольно расплывчатый, но вы взгляните на тег SO css-shapes, который содержит множество фигур с множеством разных методы.   -  person web-tiki    schedule 26.11.2014

Ответы (1)


arrow_upward
9
arrow_downward

Посмотрите на этой странице несколько примеров: http://css-tricks.com/examples/ShapesOfCSS/. В примерах используется только один элемент HTML, поэтому при дополнительной сложности можно было бы использовать больше элементов.

person clmarquart    schedule 06.04.2011