Как добавить фигуру в html
Перейти к содержимому

Как добавить фигуру в html

  • автор:

: Элемент иллюстрации с необязательной подписью

HTML-элемент (Иллюстрация с необязательной подписью) представляет самостоятельный контент, часто с подписью (заголовком), которая указывается с помощью элемента ( ). Диаграмма и её подпись представляет собой единое целое.

Интерактивный пример

Категории контента Основной поток, секционный корень, явный контент
Допустимое содержимое Элемент за которым следует основной поток; или поточный контент за которым следует элемент ; или поточный контент.
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любые элементы принимающие основной поток.
Допустимые ARIA-роли group , presentation
DOM-интерфейс HTMLElement

Атрибуты

Этот элемент поддерживает только глобальные атрибуты.

Примечания по использованию

  • Обычно это рисунок, иллюстрация, диаграмма, фрагмент кода, и т.д., на который ссылаются в основном потоке документа, но может быть перенесён в другую часть документа или в приложение не нарушив основной поток.
  • Являясь секционным корнем, структура содержимого элемента исключается из основной структуры документа.
  • Подпись может быть связана с элементом с помощью вставки внутри него (как первый или последний потомок). Первый элемент в иллюстрации предоставляет её подпись (заголовок).

Примеры

Иллюстрации

figure> img src="https://developer.mozilla.org/static/img/favicon144.png" alt="The beautiful MDN logo." /> figure> figure> img src="https://developer.mozilla.org/static/img/favicon144.png" alt="The beautiful MDN logo." /> figcaption>MDN Logofigcaption> figure> 

Фрагменты кода

figure> figcaption>Get browser details using code>navigatorcode>.figcaption> pre> function NavigatorExample() < var txt; txt = "Browser CodeName: " + navigator.appCodeName + "; "; txt+= "Browser Name: " + navigator.appName + "; "; txt+= "Browser Version: " + navigator.appVersion + "; "; txt+= "Cookies Enabled: " + navigator.cookieEnabled + "; "; txt+= "Platform: " + navigator.platform + "; "; txt+= "User-agent header: " + navigator.userAgent + "; "; console.log("NavigatorExample", txt); >pre> figure> 

Цитирования

figure> figcaption>cite>Edsger Dijkstra:cite>figcaption> blockquote> If debugging is the process of removing software bugs, then programming must be the process of putting them in. blockquote> figure> 

«Если отладка — процесс удаления ошибок, то программирование должно быть процессом их внесения», — Эдсгер Дейкстра.

Стихи

figure> p style="white-space:pre"> Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the green, Or, like a nymph, with long dishevell'd hair, Dance on the sands, and yet no footing seen: Love is a spirit all compact of fire, Not gross to sink, but light, and will aspire. p> figcaption>cite>Venus and Adoniscite>, by William Shakespearefigcaption> figure> 

Спецификации

Specification
HTML Standard
# the-figure-element

Совместимость с браузерами

BCD tables only load in the browser

CSS фигуры

Очередная порция впечатляющих возможностей CSS — коллекция фигур на чистом CSS. Никаких картинок в Фотошопе и сложной разметки. С помощью псевдоэлементов, рамок и теней можно создавать сложные css-фигуры на основе всего лишь одного html-элемента.

1. Круг

2. Овал

3. Треугольник вершиной вверх

4. Треугольник вершиной вниз

5. Треугольник вершиной влево

6. Треугольник вершиной вправо

7. Верхний левый угол

8. Верхний правый угол

9. Нижний левый угол

10. Нижний правый угол

11. Трапеция

12. Параллелограмм

13. Шестиугольная звезда

.d13 < width: 0; height: 0; margin-bottom: 30px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #374F9C; position: relative; >.d13:after

14. Пятиугольная звезда

.d14 < margin: 50px 0; height: 0; width: 0; position: relative; border-right: 50px solid transparent; border-bottom: 35px solid #E7337A; border-left: 50px solid transparent; transform: rotate(35deg); >.d14:before, .d14:after < content: ""; height: 0; width: 0; position: absolute; >.d14:before < top: -26px; left: -32px; border-bottom: 40px solid #E7337A; border-left: 15px solid transparent; border-right: 15px solid transparent; transform: rotate(-35deg); >.d14:after

15. Стрелка

.d15 < width: 60px; height: 20px; margin: 10px 0; background: #B74388; position: relative; >.d15:after

16. Шестиугольник

.d16 < margin: 20px 0; width: 100px; height: 55px; background: #F1CCAE; position: relative; >.d16:before, .d16:after < content: ""; width: 0; height: 0; position: absolute; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; >.d16:before < top: -25px; border-bottom: 25px solid #F1CCAE; >.d16:after

17. Восьмиугольник

.d17 < width: 100px; height: 100px; background: #54999A; position: relative; >.d17:before, .d17:after < content: ""; width: 42px; height: 0; position: absolute; left: 0; border-left: 29px solid white; border-right: 29px solid white; >.d17:before < top: 0; border-bottom: 29px solid #54999A; >.d17:after

18. Сердце

.d18 < position: relative; width: 100px; height: 80px; >.d18:before, .d18:after < content: ""; position: absolute; left: 50px; top: 0; width: 50px; height: 80px; background: #EE4156; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; >.d18:after

19. Ромб

.d19 < width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #53BA88; position: relative; top: -50px; >.d19:after

20. Ромб

.d20 < margin-bottom: 20px; width: 0; height: 0; border: 50px solid transparent; border-bottom: 70px solid #47002D; position: relative; top: -50px; >.d20:after

21. Символ Инь-Ян

.d21 < width: 100px; height: 50px; background: white; border-color: black; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 50%; position: relative; >.d21:before, .d21:after < content: ""; width: 12px; height: 12px; position: absolute; top: 50%; border-radius: 50%; >.d21:before < left: 0; background: white; border: 19px solid black; >.d21:after

22. Пакман

23. Домик с крышей

.d23 < height: 55px; width: 100px; margin: 35px 20px 0 0; background: #B1BA5C; position: relative; >.d23:before

Как сделать фигуру (трапецию) на CSS?

введите сюда описание изображения

Как сделать такую фигуру на CSS и HTML?

Отслеживать
34.4k 6 6 золотых знаков 29 29 серебряных знаков 72 72 бронзовых знака
задан 23 янв 2016 в 17:54
John Freeman John Freeman
139 1 1 золотой знак 2 2 серебряных знака 12 12 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Смотря для чего нужна эта фигура, возможен еще такой вариант:

.shape

Отслеживать
ответ дан 23 янв 2016 в 18:24
Ihor Tkachuk Ihor Tkachuk
1,316 1 1 золотой знак 8 8 серебряных знаков 13 13 бронзовых знаков

body < margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; min-height: 300px; >.block < position: relative; width: 250px; height: 50px; background-color: rgba(104, 144, 231, 1); >.block:before < position: absolute; content: ''; top: 0; left: -50px; width: 0; height: 0; border-top: 50px solid rgba(104, 144, 231, 1); border-left: 50px solid transparent; >.block:after

Отслеживать
ответ дан 23 янв 2016 в 18:18
Kuat Mustafin Kuat Mustafin
692 4 4 серебряных знака 11 11 бронзовых знаков

  • html
  • css
  • css3
  • html5
Связанные
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.6.4.10328

Фигуры в HTML

Мне нужно создать 2 цветных прямоугольники без использования картинок и частично наложить их друг на друга.

Отслеживать
51.4k 88 88 золотых знаков 269 269 серебряных знаков 508 508 бронзовых знаков
задан 16 сен 2011 в 17:38
1 1 1 серебряный знак 1 1 бронзовый знак

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Для этого предназначен z-index, например:

  #one < position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; z-index: 1; background-color: red; >#two

даст наложение черного прямоугольника на красный.

Отслеживать
ответ дан 16 сен 2011 в 17:59
34.5k 27 27 золотых знаков 99 99 серебряных знаков 215 215 бронзовых знаков

.color_1,.color_2 < display:block; width:100px; /* ширина каждого блока */ height:100px; /* высота каждого блока */ position:relative; >.color_1 < background:#ffffff; /* фон, цвет белый */ left:0px;top:0px; /* позиция элемента относительно его текущей позиции */ >.color_2 < background:#000000; /* фон, цвет чёрный */ left:0px;top:0px; /* позиция элемента относительно его текущей позиции */ >

Отслеживать
51.4k 88 88 золотых знаков 269 269 серебряных знаков 508 508 бронзовых знаков
ответ дан 16 сен 2011 в 17:52
585 3 3 серебряных знака 8 8 бронзовых знаков

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.6.4.10328

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *