Создаем геометрические фигуры с помощью CSS

На мой взгляд, одним из интересных нововведений в CSS3, является возможность использования меньшего количества изображений в веб-дизайне и создание различных фигур.

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

В сегодняшнем уроке мы создадим геометрические фигуры, используя только свойства CSS3.

Что вам понадобится для использования данного руководства

  • Знание CSS3;
  • Время и внимание.

Скачать исходные файлы
Просмотреть демонстрацию

Окружность

Окружность

HTML
Для создания окружности с помощью CSS, во-первых, мы будем использовать тег div. Именуем его ID именем фигуры. Итак, в первом примере, ID будет равно Circle:

<div id="circle"></div>

CSS
Что касается CSS, просто задаем значения width и height, а затем задаем значение border radius, равное половине от width и height:

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}

Квадрат

Квадрат

HTML
Чтобы создать квадрат в CSS, как и в примере с окружностью, мы создаем div с идентификатором square. Итак, ниже приведен код для блока div:

<div id="square"></div>

CSS
Для создания квадрата в CSS, просто задаем значения width и height равные друг другу:

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}

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

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

HTML
Чтобы создать прямоугольную форму, в CSS, как и в случае с квадратом, настраиваем div, где ID равно rectangle:

<div id="rectangle"></div>

CSS
Так же, как и в случае с квадратом, мы зададим значения width и height, но на этот раз width будет больше, чем height:

#rectangle {
    width: 220px;
    height: 120px;
    background: #4da1f7;
}

Овал

Овал

HTML
Для создания овала в CSS, создаем div с ID равным oval:

<div id="oval"></div>

CSS
Овал похож на окружность; овал это прямоугольная форма с заданным радиусом, равным половине значения height:

#oval {
    width: 200px;
    height: 100px;
    background: #e9337c;
    -webkit-border-radius: 100px / 50px;
    -moz-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

Треугольник

Треугольник

HTML
И снова, для создания треугольника с помощью CSS, делаем div с ID равным triangle.

CSS
Для создания треугольника мы будем манипулировать свойством border. Изменяя ширину границы, вы получите различные углы поворота:

#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

Треугольник, направленный вниз

Треугольник, направленный вниз

HTML
Создаем перевернутый треугольник с помощью CSS. Снова создаем div. ID равно triangle_down:

<div id="triangle_down"></div>

CSS
Создавая перевернутый треугольник, оперируем толщиной границы:

#triangle_down {
    width: 0;
    height: 0;
    border-top: 140px solid #20a3bf;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

Треугольник, направленный влево

Треугольник, направленный влево

HTML
Для создания треугольной фигуры, которая смотрит влево, снова создаем div с ID triangle_left:

<div id="triangle_left"></div>

CSS
Создавая треугольник, направленный влево, оперируем свойствами границ правой стороны треугольника:

#triangle_left {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-right: 140px solid #6bbf20;
    border-bottom: 70px solid transparent;
}

Треугольник, направленный вправо

Треугольник, направленный вправо

HTML
Для создания треугольной фигуры, которая смотрит вправо, создаем div с ID triangle_right:

<div id="triangle_right"></div>

CSS
Создавая треугольник, направленный вправо, оперируем свойствами границ правой стороны треугольника:

#triangle_right {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-left: 140px solid #ff5a00;
    border-bottom: 70px solid transparent;
}

Ромб

Ромб

HTML
Для создания фигуры «ромб», создаем div с ID diamond:

<div id="diamond"></div>

CSS
Ромб можно создать несколькими способами. Используя свойство transform совместно со значениями свойства rotate, мы можем отобразить два треугольника, расположенных рядом друг с другом:

#diamond {
    width: 120px;
    height: 120px;
    background: #1eff00;
/* Rotate */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
/* Rotate Origin */
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    margin: 60px 0 10px 310px;
}

Трапеция

Трапеция

HTML
Для создания фигуры «трапеция», создаем div с ID равным trapezium.

<div id="trapezium"></div>

CSS
Трапеция может быть создана методом установки одинаковых значений левой и правой границы с плоской нижней границей:

#trapezium {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}

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

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

HTML
Для создания фигуры «параллелограмм», создаем div с ID равным parallelogram:

<div id="parallelogram"></div>

CSS
Для создания параллелограмма, устанавливаем значение transform равное skew для поворота элемента на угол в 30 градусов:

#parallelogram {
    width: 160px;
    height: 100px;
    background: #8734f7;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
}

Звезда

Звезда

HTML
Для создания фигуры «звезда», создаем div с ID равным star:

<div id="star"></div>

CSS
Создание фигуры «звезда» - последовательность странных манипуляций с границами с использованием свойства transform равным rotate. Смотрите код ниже:

#star {
    width: 0;
    height: 0;
    margin: 50px 0;
    color: #fc2e5a;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -moz-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}

#star:before {
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #fc2e5a;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: '';
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}

#star:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    color: #fc2e5a;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
}

Звезда (6ти конечная)

Звезда (6ти конечная)

HTML
Для создания фигуры «шестиконечная звезда», создаем div с ID равным parallelogram:

<div id="star_six_points"></div>

CSS
Шестиконечная звезда создается с помощью свойства border. Создаем два набора фигур и комбинируем в одну:

#star_six_points {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #de34f7;
    margin: 10px auto;
}

#star_six_points:after {
    content: &quot;&quot;;
    width: 0;
    height: 0;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #de34f7;
    margin: 30px 0 0 -50px;
}

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

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

HTML
Для создания фигуры «пятиугольник», создаем div с ID равным pentagon:

<div id="pentagon"></div>

CSS
Создание пятиугольника заключается в создании двух элементов, которые затем соединяются в один. Первый элемент – форма трапеции. Затем вверху добавляем треугольную форму:

#pentagon {
    width: 54px;
    position: relative;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #277bab transparent;
}

#pentagon:before {
    content: &quot;&quot;;
    height: 0;
    width: 0;
    position: absolute;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #277bab;
}

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

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

HTML
Для создания фигуры «шестиугольник», создаем div с ID равным hexagon:

<div id="hexagon"></div>

CSS
Есть несколько способов создания шестиугольника. Один из них полностью идентичен созданию пятиугольника. Создаем прямоугольную форму и вверху добавляем два треугольника:

#hexagon {
    width: 100px;
    height: 55px;
    background: #fc5e5e;
    position: relative;
    margin: 10px auto;
}

#hexagon:before {
    content: &quot;&quot;;
    width: 0;
    height: 0;
    position: absolute;
    top: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #fc5e5e;
}

#hexagon:after {
    content: &quot;&quot;;
    width: 0;
    height: 0;
    position: absolute;
    bottom: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #fc5e5e;
}

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

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

HTML
Для создания фигуры «восьмиугольник», создаем div с ID octagon:

<div id="octagon"></div>

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

#octagon {
    width: 100px;
    height: 100px;
    background: #ac60ec;
    position: relative;
}

#octagon:before {
    content: &quot;&quot;;
    width: 42px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}

#octagon:after {
    content: &quot;&quot;;
    width: 42px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}

}

Сердце

Сердце

HTML
Для создания фигуры «сердце», создаем div с ID heart:

<div id="heart"></div>

CSS
Эта фигура довольно сложная в создании, но её можно сделать с помощью вращения элементов под разными углами и смены значения свойства transform-origin для смены позиции вращаемых элементов:

#heart {
    position: relative;
}

#heart:before,#heart:after {
    content: &quot;&quot;;
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

Яйцо

Яйцо

HTML
Для создания фигуры «яйцо», создаем div с ID egg:

<div id="egg"></div>

CSS
Концепция фигуры «яйцо» похожа на концепцию фигуры «овал», за исключением свойства height, которое больше, чем width. И особое внимание в этой фигуре придается свойству radius. С помощью подбора его значений можно добиться нужного результата:

#egg {
    width: 136px;
    height: 190px;
    background: #ffc000;
    display: block;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Бесконечность

Бесконечность

HTML
Для создания фигуры «бесконечность», создаем div с ID infinity:

<div id="infinity"></div>

CSS
Фигура «бесконечность» может быть создана путем аккуратной манипуляции свойством border и установки углов окружности:

#infinity {
    width: 220px;
    height: 100px;
    position: relative;
}

#infinity:before,#infinity:after {
    content: &quot;&quot;;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid #06c999;
    -moz-border-radius: 50px 50px 0;
    border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
    border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Бабл для комментария

Бабл для комментария

HTML
Для создания фигуры «библ», создаем div с ID comment_bubble:

<div id="comment_bubble"></div>

CSS
Эта фигура может быть создана путем создания треугольника и задания свойства border radius, а затем присоединения прямоугольника к его левой стороне:

#comment_bubble {
    width: 140px;
    height: 100px;
    background: #088cb7;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

#comment_bubble:before {
    content: &quot;&quot;;
    width: 0;
    height: 0;
    right: 100%;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid #088cb7;
    border-bottom: 13px solid transparent;
}

Pacman

Pacman

HTML
Для создания фигуры «pacman», создаем div с ID pacman:

<div id="pacman"></div>

CSS
Создание pacman – целая хитрость. Манипулируйте свойствами border и radius для создания окружности с открытой левой стороной:

#pacman {
    width: 0;
    height: 0;
    border-right: 70px solid transparent;
    border-top: 70px solid #ffde00;
    border-left: 70px solid #ffde00;
    border-bottom: 70px solid #ffde00;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}

Заключение

Есть множество возможностей создания фигур с помощью CSS3. Вы можете использовать фигуры как часть вашего дизайна, к тому же у них есть приемлемый «костыль» в случае браузеров эпохи юрского периода, на подобии Internet Explorer.

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

Вадим Дворниковавтор-переводчик статьи «Make Shapes with CSS: How to Create Different Shapes in CSS»

Комментарии

Оставьте свой комментарий
ОА
Олег А.

Квадратики, это конечно интересно,
но нигде не нашёл, как вот такую фигуру слепить, как на скриншоте.
Возможно такое ?

А
Анд

Скопирована с хаба

АА
Александр А.

Спасибо!

ВМ
Вячеслав М.

Добрый день.
Вы можете подсказать как нарисовать в css такой круг?

AL
Alexey L.

Генератор треугольников, если кому интересно:

http://apps.eky.hk/css-triangle-generator/

AL
Alexey L.

http://htmlforum.ru/index.php?showtopic=49661#entry368125

Вот тут я подробно написал по какому принципу выполнить звезду.

AL
Alexey L.

Ну и нулевую высоту имеет смысл указывать только если в блоке предполагается содержимое. Если мы зададим нулевую высоту, то содержимое не будет растягивать блок.

AL
Alexey L.

Ну а в последнем примере вместо последних четырёх свойств можно было указать одно: border-radius: 70px. Впрочем, возможно, примеры подобраны так, чтоб показать что одни и те же свойства можно задавать иногда разными свойствами.

AL
Alexey L.

Чтоб понять как работает восьмиугольник нужно сделать его на белом фоне. Тогда видно, что грани не обрезаются, а просто граница, с помощью которой сделан эффект перехода, совпадает по цвету с фоном, в котором находится восьмиугольник. Для того, чтоб не зависеть от фона, нужно сделать исходным не квадрат, а прямоугольник и к нему приделать две трапеции.
Интересно соотношение размеров. 29 ширина перехода + 42 ширина грани + 29 ширина второго перехода = 100 пикселей, равен квадрату.
При этом, если исходить из того, что грани должны быть равны, то 29 пикселей перехода должны образовывать грань в 42 пикселя. Поскольку 29 пикселей это катет прямоугольного треугольника, а грань - его гипотенуза, то, по теореме Пифагора, 29 в квадрате (841) + ещё столько же (сумма квадратов катетов 1682) должна быть равна 42 в квадрате (1764).
Ну, почти... 🙂

А
Александр

А как сделать параллелограмм, но так чтобы правило наклона не воздействовало на текст?

AL
Alexey L.

Для этого нужно создать элемент с абсолютным позиционированием.

Загрузить еще