CSS-Shapes создаются с помощью Cascade Styling Sheets, чтобы сделать HTML-элементы фигурами и изображениями. Самые основные формы включают треугольники, квадраты и круги, но могут быть сделаны в более продвинутые формы, такие как сердца, восьмиугольники и звезды.

Формы CSS относятся к вопросам о рендеринге, ошибках и технических проблемах форм, созданных в HTML/CSS. Они могут использоваться в любом теге, но должны отображаться как элементы block или inline-block. Формы CSS можно использовать для привлечения внимания зрителей к определенным элементам на странице, создания графики, структуры страницы и объектов.

Вот простой треугольник CSS,

.left-tri {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right: 10px solid brown; 
}

Вот самая распространенная форма CSS,

.square {
    width: 100px;
    height: 100px;
    background: brown;
}

Одним из преимуществ использования CSS Shape является возможность рендеринга на любом мониторе без пикселизации. Формы CSS очень похожи на SVG (масштабируемую векторную графику), но исключают использование файла изображения. Они также могут позволить разработчику больше полагаться на CSS для стилизации страницы.


CSS-формы (исключение CSS) - это новый инструмент, над которым работает Adobe. В настоящее время поддержка браузера очень плохая. С помощью CSS Exclusive вы можете добавить пути для текста, чтобы обернуть вокруг или внутри этого объекта, чтобы получить текстовую структуру без изображения. (Например, для просмотра необходимо включить исключение CSS в браузере)

Не все CSS-формы имеют обратную поддержку браузера, для исключений CSS обратитесь к вкладке "Поддержка браузера".


Рекомендации

Поддержка браузера

Инструменты генератора формы

  • Генератор форм CSS - онлайн-инструмент для автоматического создания нескольких предопределенных основных форм CSS.