Как создать фигуру на css?

Ссылка скопирована
CSS HTML PHP
14 апреля 2026 1 ответ

Всем привет. Может кто знает как создать такую фигуру или есть у кого примеры ?
Взял пример от сюда
Но не смог реализовать что бы не было bacground а только контур как у меня в примере.
Любой пример будет на вес золото)
Спасибо за помощь

Как создать фигуру на css?

Дополнительно:

Если ты посмотришь код этого примера через инспектор, я более чем уверен что увидишь там обычный прямоугольный див с фоновой svg/png.

Ответы:

Тыкни там в конструкторе вариант "frame", таким образом можно сделать саму рамку в виде отдельного элемента, а контент сам по себе располагай

Если без clip-path - я бы сделал через два псевдоэлемента для этих углов (закругленные края слева для основного блока и before, но нужно поиграть с размерами)

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Стас DB Ответ

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

1. Создание квадрата:

.square {
  width: 100px;
  height: 100px;
  background-color: red;
}

.square { width: 100px; height: 100px; background-color: red; }

2. Создание круга:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
}

.circle { width: 100px; height: 100px; border-radius: 50%; background-color: blue; }

3. Создание треугольника:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
}

.triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid green; }

4. Создание многоугольника:

.polygon {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid yellow;
  position: relative;
}
.polygon:before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid orange;
}

.polygon { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid yellow; position: relative; } .polygon:before { content: ''; position: absolute; top: -50px; left: -50px; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid orange; }

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

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

Вам также может быть интересно

Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ