MicroTools

CSS Shapes Generator

Генеруйте CSS-трикутники, зірки, полігони та власні clip-path фігури. Копіюйте CSS, HTML або React-код миттєво.

Size120px
Shape: Triangle Up
CSS border trick
.shape {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 120px solid #6366f1;
}

Browser Support

PropertyChromeFirefoxSafariEdge
border (trick)✓1+✓1+✓1+✓12+

Про інструмент CSS Shapes Generator

Генеруйте CSS-фігури онлайн — трикутники, зірки, полігони, стрілки та більше. Отримуйте готовий CSS, HTML та React-код з інформацією про підтримку браузерів. Будуйте власні clip-path фігури візуально.

Як використовувати

  1. 1Перегляньте галерею фігур і натисніть на фігуру для вибору.
  2. 2Фільтруйте за категорією або шукайте за назвою.
  3. 3Налаштуйте колір та розмір за допомогою елементів керування.
  4. 4Перемикайтеся між вкладками CSS, HTML+CSS та React для копіювання коду.
  5. 5Використовуйте редактор власного clip-path для створення своєї фігури.

Часті запитання

Які фігури доступні?
Понад 30 фігур у 5 категоріях: Трикутники (6), Полігони (8), Зірки (5), Стрілки (5) та Спеціальні фігури (8), включно з серцем, місяцем, pac-man, хмаринкою та кільцем.
Як працює конструктор власних фігур?
Введіть будь-яке значення clip-path (наприклад, polygon(50% 0%, 0% 100%, 100% 100%)) і побачте його в реальному часі разом зі згенерованим CSS-кодом.
Які CSS-техніки використовуються?
Фігури використовують трюки з border (трикутники), clip-path: polygon(), clip-path: path(), border-radius та box-shadow залежно від фігури.
Яка підтримка браузерів?
Більшість фігур працює у всіх сучасних браузерах. clip-path polygon() підтримується в Chrome 55+, Firefox 54+, Safari 9.1+, Edge 79+. Таблиця підтримки браузерів відображається для кожної техніки.

Інформація

Категорія
dev
Використання
Необмежено

Схожі інструменти

CSS Visual Generator

Генеруйте CSS-градієнти, тіні та border-radius візуально з живим попереднім переглядом.

Code Minifier & Beautifier

Мінімізуйте або прикрашайте CSS, JavaScript та HTML. Миттєво показує економію розміру файлу.

Regex Tester

Тестування регулярних виразів у реальному часі з підсвічуванням збігів, групами захоплення, режимом заміни та 12 поширеними шаблонами.

Більше інструментів: dev

JSON Formatter

Форматуйте, валідуйте та прикрашайте JSON-дані.

Base64 Encode/Decode

Кодуйте текст у Base64 або декодуйте Base64 у текст.

Encoder / Decoder

Кодуйте та декодуйте текст у 15+ форматах: Base64, URL, Hex, Binary, Morse, ROT13, JWT, SHA-256 та інші.

GitHub Repository Scanner

Візуалізуйте будь-який публічний репозиторій GitHub: файлове дерево, статистика, README та учасники.