Фигуры CSS

Модуль фигур CSS описывает геометрические фигуры. Он также определяет свойства CSS, которые могут использовать фигуры для управления геометрией области плавания элемента; эта область может затем применяться к исключениям или определять область содержимого элемента.

Спецификация определяет несколько способов создания фигур. Содержимое может быть размещено вокруг или внутри фигуры, а не следовать по умолчанию прямоугольной форме области элемента.

Фигуры определяют геометрии, которые могут использоваться в качестве значений CSS. Этот модуль предоставляет функции для создания эллипсов, многоугольников и произвольных геометрий. Другие модули CSS могут использовать фигуры, определенные в этой спецификации, включая траекторию движения CSS и маскирование CSS.

Фигуры CSS в действии

В приведенном ниже примере показано изображение, которое было выровнено влево, и свойство shape-outside применено со значением circle(50%). Это создаёт круглую фигуру, и содержимое, окружающее плавание, теперь обтекает эту фигуру. Это меняет длину строчных ящиков обертывающего текста.

<div class="box">
  <img
    alt="A hot air balloon"
    src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
img {
  float: left;
  shape-outside: circle(50%);
}

Справочник

Свойства

Примечание: Модуль фигур CSS вводит свойства shape-inside и shape-padding, которые ещё не реализованы.

Типы данных

<basic-shape>

Функции

Термины

Базовая область

Руководства

Обзор фигур: Определение основных фигур с помощью свойств shape-margin и clip-path и отладка основных фигур с помощью инструментов разработчика.
Фигуры из значений области: Использование кривизны border-radius и значений модели CSS области для создания фигур.
Основные фигуры с shape-outside: Создание прямоугольников, кругов, эллипсов и многоугольников с помощью фигур CSS, базовой области и свойства shape-outside.
Фигуры из изображений: Создание фигур из полупрозрачных файлов изображений и градиентов CSS.

Связанные понятия

Модуль траекторий движения CSS

Модуль маскирования CSS

Модуль фонов и границ CSS

border-radius сокращённая запись

Модуль модели области CSS

<box-edge> тип данных

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

Спецификация
Модуль фигур CSS уровень 1
Модуль фигур CSS уровень 2

См. также

Ресурсы фигур CSS
Фигуры CSS 101 с alistapart.com (2014)
Создание непрямоугольных макетов с помощью фигур CSS с sarasoueidan.com (2013)
Как использовать фигуры CSS в вашем веб-дизайне с tutsplus.com (2016)
Как начать работу с фигурами CSS с webdesignerdepot.com (2015)
Редактирование фигур CSS с помощью редактора траектории фигур с mozilla.org (2018) (Видео)

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_shapes