Как делать фигуры на CSS

как сделать фигуру в css
Метки: /

В этой статье мы разберём как сделать фигуру в CSS, будет очень интересно.

Ещё посмотрите статью «Снеговик на простом CSS», там тоже нужны навыки для создания фигур.

Так же скажу, что материал для этой статьи мы взяли сайта Хабр.

Простые фигуры:

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

Квадрат:

Квадрат на CSS

Прямоугольник:

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

Прямоугольник на CSS

Круг:

Это тот же квадрат, только с круглёнными краями.

Круг на CSS

Овал:

овал в CSS

Треугольник вверх:

Теперь перейдём к самому интересному на мой взгляд, к треугольникам, суть их создания будет в том, что мы изменяем рамки так как нам надо.

Треугольник вверх на CSS

Треугольник вниз:

Треугольник вниз на CSS

Треугольник налево:

Треугольник налево в CSS

Треугольник направо:

Треугольник направо на CSS

Треугольник в левом верхнем углу:

Треугольник в левом верхнем углу на CSS

Треугольник в правом верхнем углу:

Треугольник в правом верхнем углу на CSS

Треугольник в левом нижнем углу:

Треугольник в левом нижнем углу на CSS

Треугольник в правом нижнем углу:

Треугольник в правом нижнем углу на CSS

Параллелограмм:

Последние что осталось разобрать из простых фигур, это параллелограмм и трапецию.

Параллелограмм на CSS

Трапеция:

Трапеция на CSS

Сложные фигуры на CSS:

Теперь перейдём к более сложным фигурам, я покажу как сделать звёзды, многоугольники и сердечко.

Звезда (6-конечная):

Звезда (6-конечная) на CSS

Звезда (5-конечная):

Звезда (5-конечная) на CSS

Пятиугольник:

Пятиугольник на CSS

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

Шестиугольник на CSS

Восьмиугольник:

Восьмиугольник на CSS

Сердечко:

Сердце на CSS

Вывод:

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

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую:

55058653