Элемент (от англ. «figure» ‒ «фигура, рисунок») используется для группирования самодостаточного контента, например, иллюстраций, диаграмм, фотографий, примеров кода и т.д.
Хотя содержимое элемента относится к основному потоку, его позиция является независимой от основного потока и никак не влият на поток документа при удалении.
Теги figure и figcaption, демонстративный материал
В галерее селфи каждая маленькая картинка-превьюшка ссылается на отдельную страницу с «фотокарточкой». Эта фотокарточка содержит полноразмерное изображение и его описание. Она достаточно независима, и позже мы сможем вставить её на любую другую страницу блога. Как правильно размечать такие «карточки»?
Для этого отлично подойдёт тег . Этот тег хорош для любого иллюстративного или демонстрационного материала, которым можно дополнить содержание документа. Таким материалом могут быть схемы, графики, примеры кода, таблицы и так далее. При удалении иллюстративного материала основное содержание не должно пострадать, иначе это уже не дополнительный материал и тег не очень подходит для его разметки.
Обычно каждый такой материал сопровождает разъясняющий комментарий или «легенда». Для разметки этого комментария предназначен ещё один тег — <figcaption> , который размещается первым или последним элементом внутри . Например:
Давайте с помощью разметим фото в нашей галерее. Приступим.
По умолчанию у тега figure есть отступы, поэтому мы добавили стили для figure и figcaption , которые можно посмотреть во вкладке style.css .
Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 20 января по 22 марта 2020. До 26 ноября цена 13 900 14 900
20 HTML & with CSS
Collection of free HTML and CSS & code examples (with little JS). Update of September 2020 collection. 2 new items.
Example of how to use alt to print to your img captions. Handy for SEO purposes. Credit to Josh Emrich for his Campy Creature Invader artwork. And JavaScript by CodeJoust on StackExchange.
Using figcaption to add multiple labels to an image. By changing a CSS variable with media queries, the labels can adjust to a wide variety of screen sizes.
Toss the photos around or click for a larger version. Photos and captions (authors) are a random selection from «Lorem Picsum». «GreenSock Draggable» for the interaction.
figure & figcaption combo with some extra features in the form of a short description added on hover of the caption and the back side of the figure for a full description. Can be used in a portfolio to showcase both the work and an extensive description in a relatively small space.
Тег используется для группирования контента, который дополняет или иллюстрирует содержание документа. В теге могут содержаться изображения, диаграммы, иллюстрации, примеры кодов и т.д.
Содержимое тега относится к основному потоку веб-контента, однако воспринимается как автономная единица.
Для добавления подписи или пояснений к содержимому тега используется тег . Тег включается в тег и размещается в качестве первого или последнего дочернего элемента. Если является первым вложенным элементом, то содержимое будет отображаться вверху изображения.
Синтаксис
Содержимое тега пишется между открывающим ( ) и закрывающим ( ) тегами.
в HTML
Тег определяет автономное содержимое, например иллюстрации, диаграммы, фотографии, списки кодов и т.д.
Хотя содержимое элемента связано с основным потоком, его положение не зависит от основного потока, и если оно удалено, оно не должно влиять на поток документа.
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает элемент.
Элемент
6.0
9.0
4.0
5.0
11.1
Различия между HTML 4,01 и HTML5
Тег является новым в HTML5.
Советы и примечания
Совет: Элемент используется для добавления заголовка для элемента .
Элементы figure и figcaption
В обычных печатных изданиях, таких как книги и журналы, изображения, таблицы или примеры кода обычно сопровождаются подписью. До сих пор у нас не было возможности семантически выделять такой тип содержимого напрямую в HTML, вместо того чтобы прибегать к именам классов СSS. HTML5 надеется исправить эту проблему с помощью новых элементов: и . Давайте разберемся!
Элемент
Предполагается, что элемент будет использоваться в сочетании с элементом для того, чтобы выделять диаграммы, иллюстрации, фотографии и примеры кода (помимо прочего). Вот что говорится о в спецификации:
Элемент представляет собой фрагмент независимого содержимого, совсем необязательно с подписью, который как правило относится к отдельному элементу из основного содержимого документа, и может быть удалён из документа без ущерба его смыслу.
Элемент
Этот элемент стал поводом серьезных споров. Спецификация изначально предлагала приспособить для этих целей элемент , вместо того, чтобы придумывать новый элемент. Были и другие предложения, включавшие , ,
и даже заголовки
. Семантика элемента изменилась, и поэтому мы начали использовать комбинацию и внутри по предложению Джереми. Но большинство этих идей были отклонены из-за отсутствия обратной совместимости для CSS-оформления.
Наши постоянные читатели знают, что недавно был представлен новый элемент . Кто знает, приживется ли он, а пока давайте узнаем, что о нём говорит спецификация:
Элемент представляет собой заголовок или описание для .
Элемент является необязательным и может появляться до или после содержимого внутри . Только один элемент может быть помещен в , хотя сам элемент может содержать несколько дочерних элементов (например, или ).
Использование и
Итак, мы узнали, что об этих элементах говорится в спецификации. Как же их использовать? Давайте рассмотрим это на примерах.
для изображения
Изображение в элементе без подписи:
Вот код для этого:
с изображением и подписью
Изображение внутри элемента с поясняющей подписью:
Наглая макака из Борнео. Фото Ричарда Кларка
И код, который мы использовали:
с несколькими изображениями
Размещение нескольких изображений внутри одного элемента с общей подписью:
Слева направо: кукабара, пеликан и многоцветный лорикет. Фотографии Ричарда Кларка
с блоком кода
Элемент может быть также использован для примеров кода:
Ниже приведен код для этого:
Различия между и
Обратите внимание, что если положение содержимого в тексте тесно связано с предыдущим и последующим содержимым, следует использовать более подходящие элементы — например,
, или даже , в зависимости от типа содержимого.
Не останавливайтесь на достигнутом!
Не стоит ограничивать использование изображениями и примерами кода. Другим содержимым, подходящим по смыслу для использования в элементе может быть аудио, видео, графики (возможно, с использованием или ), стихи или таблицы со статистикой.
Однако использование элемента не всегда целесообразно. Например, графический баннер не стоит размечать в . Используйте для этого просто .
Вывод
Как мы продемонстрировали в этой статье, элемент открывает много возможностей. Только не забудьте убедиться, что он подходходит для конкретного случая. Хотя вряд ли вы бездумно относитесь к разметке, так ведь?
Перевод оригинальной статьи «The figure & figcaption elements» Ричарда Кларка (Richard Clark), опубликованной на сайте HTML5Doctor.com.
Перевод выполнила Екатерина Мордвина.
Комментарии +
Anton Diaz 12 марта 2012 в 20:13
Элемент представляет собой фрагмент независимого содержимого, совсем необязательно с подписью, который как правило относится к отдельному элементу из основного содержимого документа, и может быть удалён из документа без ущерба его смыслу.
Определение ужасно расстраивает своей неотносимостью к тому, для чего его придумали. Возьмем хрестоматийный пример использования — иллюстрация к статье. Ну вот как она может быть удалена из документа без ущерба его смыслу, если это часть контента? Это не фоновые изображения кавычек в
и не пиктограмма к блокам с предупреждениями, это содержимое. К вышеназванному определению больше бы подошел баннер с таргетированной рекламой: к контенту оно относится, но в общем и целом это элемент чужеродный и отрывается из содержимого (либо заменяется) безболезненно.
Если содержимое является важным, но его положение в потоке общего содержимого не так важно, используется элемент
Почему же вы написали, что блок с кодом вполне может быть помещен в этот элемент, если его положение на странице имеет значение? Если в вашей статье поменять блоки с кодом местами, разве от этого не вызовет путаницу?
Антон, я полностью согласен с тем, что описание этих элементов можно было сделать ещё точнее и прозрачнее. Но в качестве стартовой информации для понимания текст вполне хорош. Разница между блоком кода и блоком кода в состоит в том, что, первый является содержимым, т.е. предваряется фразой «ну вот как здесь…» а второй может быть упомянут в любом месте статьи, например «вот бывают и такие штуки, но мы сейчас не об этом». А подпись «вот бывают и такие штуки». Тонко, не всегда понятно — но явно заслуживает отдельной логической единицы, как по мне. Плюс сильно пересекается с типографской традицией, где в такие помещают цитаты (вот прям дубликаты) из текста, картинки и подобное содержимое, которое не нужно читать в потоке текста, а нужно рассматривать до, после или в перерывах между чтением.
Вадим, сходу я могу вспомнить только один конкретный(то есть реально увиденныйв Вебе) пример, где тег с такой семантикой был бы уместен — блоки «Хозяйке на заметку» в Ководстве Лебедева.
На мой взгляд, явно относимый к тексту иллюстративный материал гораздо больше заслуживает своего отдельного семантически выделенного тега. А такой <figure> притянут в HTML за уши, если даже не за усы.
Господа, предлагаю начать с того, чтобы обратиться к актуальным спецификациям;) WHATWG:
Элемент figure представляет некое потоковое содержимое, с необязательным заголовком, являющееся самостоятельным (self-contained) и на которое, как правило, можно сослаться из основного потока документа как на единое целое.
Таким образом, этот элемент может использоваться для объявления иллюстраций, диаграмм, листингов кода и т.п., на которые ссылаются из основного содержимого документа, но которые могут, без ущерба для потока документа, быть вынесены из основного контента, например, на поля страницы, на отдельную страницу или в приложение.
Имхо, всё логично: если в статье одна иллюстрация и один пример кода, в ней может быть написано «см. рис.» и «см. код» — и никакой путаницы не будет, все поймут всё правильно, даже если рисунок и код будут без каких-либо подписей приведены в конце страницы. А если их несколько, то элементарная логика здравого смысла требует подписать их «fig. 1», «Рис. 2» и т.п. — и опять же, путаница будет минимальной, даже если пьяная секретарша переставить пару этих «fig-чего-то-там» местами. А что не так?
И в последней рабочей версии спецификации W3C вроде бы всё так же, как у WHATWG.
А «Хозяйке на заметку», по-моему, едва ли не ближе к aside (уровня статьи), чем к figure : на них ведь никто ниоткуда не ссылается, они просто именно что «касательно связаны» с основной темой, немножко «оживляя» чтение (этакая «музыкальная пауза»).
P.S. Прошу извинить за нелепую опечатку в первом комменте)
SelenIT, ну раз так, то это уже совсем другое дело В таком случае, figure — это именно то, что мне бы и хотелось, а сабжевая статья (вернее, ее перевод) уже устарела к моменту публикации.
И раз так, то «Хозяйке на заметку» — это действительно будет не figure, а вполне «полноправный» aside без всяких опасений:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
P.S. Спасибо, что внес ясность.
Кстати, по поводу последнего примера с кодом в blockquote подумалось: а не годится ли figure вообще для внешних цитат с подписью — саму blockquote внутрь, а подпись в figcaption (тем самым решив давнюю проблему, куда девать автора/источник цитаты — по смыслу они снаружи blockquote , но оформлять часто приходится как единое целое с ней)? Вроде, такая связка вполне себе «self-contained». Или это за гранью допустимого (и почему, если так)?
Вадим Макеев А вы будите продолжать писать статьи о семантике? Если да то когда планируете? А то уже давненько ничего не было.
Хорошо, конечно, но , похоже, они уже сами не знают какие теги и для чего выпускают
Dnzl, честнее было бы написать «я ничего не понял», а не «они сами не знают».
Мучаюсь уже не впервые над таким вопросом. Насколько уместно использовать и в галереях, содержащих изображения с подписями? Может быть, подскажете более уместный вариант разметки для такого случая:
Как было бы раньше:
Вариант с figure (появляется, казалось бы, лишний уровень разметки):
Насколько такой вариант оправдан и семантичен?
Я имел в виду следующее: Насколько уместно использовать figure и figcaption в галереях, содержащих изображения с подписями?
Позвольте вынести на обсуждение ещё один интересный пример:
По спецификации внутри может быть любой поточный контент. Но валидатор ругается на
, а аутлайнеры полностью игнорируют эти заголовки.
Кто-нибудь знает причину такого поведения?
Вероятно, ответ на вторую часть вопроса — то, что относится к т.н. «sectioning roots» (w3c, whatwg), секции внутри которых не учитываются в «outline» предка. Косвенно это подтверждается тем, что заголовок в табличке тоже не учитывается аутлайнером.
А вот почему заголовок внутри вызывает предупреждение «пустой заголовок» — подозреваю, что это баг валидатора. Поскольку это не ошибка, и общий результат проверки — всё-таки «Valid», думаю, этим предупреждением можно пренебречь.
Спасибо! Про «section roots» я не подумал.
Не уверен, что мы имеем дело с багом валидатора. Получается как бы один заголовок вложен в другой. На другие элементы он же не ругается.
По моим наблюдениям, ругается именно на заголовок внутри , неважно, в или в теле фигуры. Так что дело не во «вложенности заголовка», а именно с влиянием . Поскольку текст предупреждения явно неадекватен ситуации (даже если заголовок находится в неположенном месте, он всё-таки не пуст), первая мысль именно о баге.
Нашел тему на форуме с похожим вопросом, где верно подмечено, что заголовок в по текущей логике аутлайнера будет считаться заголовком всей фигуры, а не только ее подписи. Но подтверждений формального запрета такого кода нет и там. На данный момент html5.validator.nu валидирует с заголовками без ошибок и предупреждений (хотя буквально час назад там наблюдалось то же самое предупреждение — парадокс:).
Подскажите можно стилизовать просто пустой ? Вот такой код будет правильный?
figure будет стилизован в виде круга с надписью внутри.
в HTML
Используется для группирования любых элементов, например, изображений и подписей к ним.
Синтаксис
Атрибуты
Закрывающий тег
Пример. Использование тега
Примечание
Internet Explorer до версии 8.0 включительно игнорирует тег , но отображает его содержимое. Также в этом браузере любые стили не применяются к элементу, пока он не создан через скрипт, как показано в примере.
Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.
Браузеры Firefox и Chrome автоматически добавляют к свойство margin со значением 1em 40px .
Спецификация ?
Спецификация
Статус
WHATWG HTML Living Standard
Живой стандарт
HTML5
Рекомендация
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML ( Living ) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры: Настольные Мобильные ?
Internet Explorer
Chrome
Opera
Safari
Firefox
9
5
11.10
5.1
4
Android
Firefox Mobile
Opera Mobile
Safari Mobile
2.2
4
11
5
Браузеры
В таблице браузеров применяются следующие обозначения.
— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
HTML Tag
The HTML tag represents flow content that is self-contained and is typically referenced as a single unit from the main flow of the document.
The tag can be used for annotating illustrations, diagrams, photos, code listings, etc.
The HTML5 specification advises:
Self-contained in this context does not necessarily mean independent. For example, each sentence in a paragraph is self-contained; an image that is part of a sentence would be inappropriate for figure, but an entire sentence made of images would be fitting.
Syntax
The tag is written as with the caption inserted between the start and end tags.
You can use the element to provide a caption for the contents of a element.
If used, the tag is placed either as the first child or last child of its parent tag.
Examples
Basic tag usage
Here, the tag is used to markup a fragment of sample code. In this instance, the tag is placed as the first child of the element.
Images
You can also use the to markup images. But not just any image. If the image is self-contained, then it is suitable for use within the element. For example, the main image in an image gallery is an ideal candidate for the element. Charts or diagrams are also good candidates for use with the tag, as long as they’re part of the normal flow of the content.
It’s OK to place more than one image into a element, as long as the whole group is self-contained content.
Here’s an example of marking up an image with the tag:
Poetry/Lyrics
Poems and lyrics could also be marked up with the tag. Notice that the element is inside the element.
Attributes
Attributes can be added to an HTML element to provide more information about how the element should appear or behave.
There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.
The element accepts the following attributes.
Element-Specific Attributes
This table shows the attributes that are specific to the tag/element.
Attribute
Description
None
Global Attributes
The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.
accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
inert
itemid
itemprop
itemref
itemscope
itemtype
lang
spellcheck
style
tabindex
title
translate
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handler Content Attributes
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.
Below are the standard HTML5 event handler content attributes.
Again, you can use any of these with the element, as well as any other HTML5 element.
onabort
oncancel
onblur
oncanplay
oncanplaythrough
onchange
onclick
oncontextmenu
ondblclick
ondrag
ondragend
ondragenter
ondragexit
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror
onfocus
onformchange
onforminput
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onmousewheel
onpause
onplay
onplaying
onprogress
onratechange
onreadystatechange
onscroll
onseeked
onseeking
onselect
onshow
onstalled
onsubmit
onsuspend
ontimeupdate
onvolumechange
onwaiting
For a full explanation of these attributes, see HTML 5 event handler content attributes.
Differences Between HTML 4 & HTML 5
The tag is new in HTML5.
To see more detail on the two versions see HTML5 Tag. Also check out the links to the official specifications below.
Template
Here’s a template for the tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don’t need.
Note that the element does not actually have any local attributes (i.e. attributes that are specific to the element), but the following global attributes and event handlers are available to the element (and all other HTML elements).
For more information on attributes for this tag, see HTML5 Tag.
Tag Details
For more details about the tag, see HTML5 Tag.
Specifications
Here are the official specifications for the element.
What’s the Difference?
W3C creates «snapshot» specifications that don’t change once defined. So the HTML5 specification won’t change once it becomes an official recommendation. WHATWG on the other hand, develops a «living standard» that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.
Применение элемента details в HTML5
Тег details в HTML5 абсолютно новый тег. В настоящее время этот тег поддерживается только последними версиями браузера Google Chrome. Но думаю что со временем все браузеры начнут его поддерживать. Этот элемент дает возможность скрыть и показать информацию по требованию посетителя сайта. У этого элемента есть свой атрибут open , который дает возможность изменить значение тега details (по умолчанию содержимое тега). Синтаксис написания очень простой:
Давайте попробуем применить этот тег на практике:
В результате браузер сам добавит специальный значок, указывающий на то, что элемент можно развернуть:
Тег в HTML5
Этот элемент помогает группировать различные элементы друг с другом. Мне очень понравился этот элемент. Я думаю вы тоже будете его использовать на ваших сайтов. Например, можно красиво оформить рамку с изображением или видео файлом с подписью. Причем сама подпись должна быть оформлена с помощью тега figcaption. Рассмотрим небольшой пример, который поможет вам во всём разобраться:
В итоге должно получиться следующее:
Вроде бы вполне неплохо получилось, вам так не кажется? Совсем скоро мы с вами перейдем к изучению форм, а пока предлагаю ещё раз просмотреть изученные элементы.
Все права на сайт принадлежат Александру Побединскому.
Копирование любых материалов сайта возможно только с разрешения автора или при указании ссылки на источник.
Создаем геометрические фигуры с помощью CSS
На мой взгляд, одним из интересных нововведений в CSS3 , является возможность использования меньшего количества изображений в веб-дизайне и создание различных фигур.
Все те фигуры, которые вы рисовали ранее в графических редакторах теперь можно сделать с помощью CSS3 . Новые CSS свойства transform и border-radius позволяют делать это, не прибегая к помощи сторонних программ.
В сегодняшнем уроке мы создадим геометрические фигуры, используя только свойства CSS3 .
Что вам понадобится для использования данного руководства
Знание CSS3 ;
Время и внимание.
Скачать исходные файлы Просмотреть демонстрацию
Окружность
HTML Для создания окружности с помощью CSS , во-первых, мы будем использовать тег div . Именуем его ID именем фигуры. Итак, в первом примере, ID будет равно Circle :
CSS Что касается CSS , просто задаем значения width и height , а затем задаем значение border radius , равное половине от width и height :
Квадрат
HTML Чтобы создать квадрат в CSS , как и в примере с окружностью, мы создаем div с идентификатором square. Итак, ниже приведен код для блока div :
CSS Для создания квадрата в CSS , просто задаем значения width и height равные друг другу:
Прямоугольник
HTML Чтобы создать прямоугольную форму, в CSS , как и в случае с квадратом, настраиваем div , где ID равно rectangle :
CSS Так же, как и в случае с квадратом, мы зададим значения width и height , но на этот раз width будет больше, чем height :
HTML Для создания овала в CSS , создаем div с ID равным oval :
CSS Овал похож на окружность; овал это прямоугольная форма с заданным радиусом, равным половине значения height :
Треугольник
HTML И снова, для создания треугольника с помощью CSS , делаем div с ID равным triangle .
CSS Для создания треугольника мы будем манипулировать свойством border . Изменяя ширину границы, вы получите различные углы поворота:
Треугольник, направленный вниз
HTML Создаем перевернутый треугольник с помощью CSS . Снова создаем div . ID равно triangle_down :
HTML Для создания треугольной фигуры, которая смотрит влево, снова создаем div с ID triangle_left :
CSS Создавая треугольник, направленный влево, оперируем свойствами границ правой стороны треугольника:
Треугольник, направленный вправо
HTML Для создания треугольной фигуры, которая смотрит вправо, создаем div с ID triangle_right :
CSS Создавая треугольник, направленный вправо, оперируем свойствами границ правой стороны треугольника:
HTML Для создания фигуры « ромб », создаем div с ID diamond :
CSS Ромб можно создать несколькими способами. Используя свойство transform совместно со значениями свойства rotate , мы можем отобразить два треугольника, расположенных рядом друг с другом:
Трапеция
HTML Для создания фигуры « трапеция », создаем div с ID равным trapezium .
CSS Трапеция может быть создана методом установки одинаковых значений левой и правой границы с плоской нижней границей:
Параллелограмм
HTML Для создания фигуры « параллелограмм », создаем div с ID равным parallelogram :
CSS Для создания параллелограмма, устанавливаем значение transform равное skew для поворота элемента на угол в 30 градусов:
Звезда
HTML Для создания фигуры « звезда », создаем div с ID равным star :
CSS Создание фигуры « звезда » — последовательность странных манипуляций с границами с использованием свойства transform равным rotate . Смотрите код ниже:
Звезда (6ти конечная)
HTML Для создания фигуры « шестиконечная звезда », создаем div с ID равным parallelogram :
CSS Шестиконечная звезда создается с помощью свойства border . Создаем два набора фигур и комбинируем в одну:
Пятиугольник
HTML Для создания фигуры « пятиугольник », создаем div с ID равным pentagon :
CSS Создание пятиугольника заключается в создании двух элементов, которые затем соединяются в один. Первый элемент – форма трапеции. Затем вверху добавляем треугольную форму:
Шестиугольник
HTML Для создания фигуры « шестиугольник », создаем div с ID равным hexagon :
CSS Есть несколько способов создания шестиугольника. Один из них полностью идентичен созданию пятиугольника. Создаем прямоугольную форму и вверху добавляем два треугольника:
Восьмиугольник
HTML Для создания фигуры « восьмиугольник », создаем div с ID octagon :
CSS Восьмиугольник также интересная фигура. Сначала создаем две трапециевидные формы и по бокам располагаем два треугольника. Есть еще несколько способов, но этот самый действенный:
Сердце
HTML Для создания фигуры « сердце », создаем div с ID heart :
CSS Эта фигура довольно сложная в создании, но её можно сделать с помощью вращения элементов под разными углами и смены значения свойства transform-origin для смены позиции вращаемых элементов:
HTML Для создания фигуры « яйцо », создаем div с ID egg :
CSS Концепция фигуры « яйцо » похожа на концепцию фигуры « овал », за исключением свойства height , которое больше, чем width . И особое внимание в этой фигуре придается свойству radius . С помощью подбора его значений можно добиться нужного результата:
Бесконечность
HTML Для создания фигуры « бесконечность », создаем div с ID infinity:
CSS Фигура « бесконечность » может быть создана путем аккуратной манипуляции свойством border и установки углов окружности:
Бабл для комментария
HTML Для создания фигуры « библ », создаем div с ID comment_bubble :
CSS Эта фигура может быть создана путем создания треугольника и задания свойства border radius , а затем присоединения прямоугольника к его левой стороне:
Pacman
HTML Для создания фигуры « pacman », создаем div с ID pacman :
CSS Создание pacman – целая хитрость. Манипулируйте свойствами border и radius для создания окружности с открытой левой стороной:
Заключение
Есть множество возможностей создания фигур с помощью CSS3 . Вы можете использовать фигуры как часть вашего дизайна, к тому же у них есть приемлемый « костыль » в случае браузеров эпохи юрского периода, на подобии Internet Explorer .
Надеюсь, вам понравилось данное руководство. В блоке комментариев вы можете приводить собственные способы создания фигур из руководства.
Данная публикация представляет собой перевод статьи « Make Shapes with CSS: How to Create Different Shapes in CSS » , подготовленной дружной командой проекта Интернет-технологии.ру
В таком случае, figure — это именно то, что мне бы и хотелось, а сабжевая статья (вернее, ее перевод) уже устарела к моменту публикации.
