Как составить код фигур

На CSS можно создавать всевозможные формы. Квадраты и прямоугольники просты, поскольку они являются естественными формами в Интернете. Добавьте ширину и высоту, и вы получите прямоугольник нужного вам размера. Добавьте border-radius и вы сможете скруглить эту форму, а достаточное его количество позволит превратить прямоугольники в круги и овалы.

В CSS также есть псевдоэлементы ::before и ::after, которые дают нам возможность добавить еще две фигуры к исходному элементу. Умно используя позиционирование, преобразование и многие другие приемы, мы можем создавать множество форм в CSS с помощью всего одного элемента HTML.

Квадратная форма Square Shape

#square {
  width: 100px;
  height: 100px;
  background: red;
}

Прямоугольная форма Rectangle Shape

#rectangle {
  width: 200px;
  height: 100px;
  background: red;
}

Форма круга Circle Shape

#circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%
}

Овальная форма Oval Shape

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

Форма треугольника вверх Triangle Up Shape

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

Форма треугольника вниз Triangle Down Shape

#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

Левая форма треугольника Triangle Left Shape

#triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}

Правая форма треугольника Triangle Right Shape

#triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}

Форма треугольника сверху слева Triangle Top Left Shape

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

Форма треугольника сверху справа Triangle Top Right Shape

#triangle-topright {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}

Форма треугольника снизу слева Triangle Bottom Left Shape

#triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}

Форма треугольника снизу справа Triangle Bottom Right Shape

#triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}

Форма стрелы с изогнутым хвостом Curved Tail Arrow Shape

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
}

Трапециевидная форма Trapezoid Shape

#trapezoid {<br />
  border-bottom: 100px solid red;<br />
  border-left: 25px solid transparent;<br />
  border-right: 25px solid transparent;<br />
  height: 0;<br />
  width: 100px;<br />
}<br />

Форма параллелограмма Parallelogram Shape

#parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background: red;
}

Звезда (6 точек) Форма Star (6-points) Shape

#star-six {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: relative;
}
#star-six:after {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
  position: absolute;
  content: "";
  top: 30px;
  left: -50px;
}

Форма звезды (5 точек) Star (5-points) Shape

#star-five {
  margin: 50px 0;
  position: relative;
  display: block;
  color: red;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}
#star-five:before {
  border-bottom: 80px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
#star-five:after {
  position: absolute;
  display: block;
  color: red;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}

Форма пентагона Pentagon Shape

#pentagon {
  position: relative;
  width: 54px;
  box-sizing: content-box;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: red transparent;
}
#pentagon:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: -85px;
  left: -18px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent red;
}

Форма шестиугольника Hexagon Shape

#hexagon {
  width: 100px;
  height: 57.735px;
  background: red;
  position: relative;
}
#hexagon::before {
  content: "";
  position: absolute;
  top: -28.8675px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 28.8675px solid red;
}
#hexagon::after {
  content: "";
  position: absolute;
  bottom: -28.8675px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 28.8675px solid red;
}

Форма октагона Octagon Shape

#octagon {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
#octagon:before {
  content: "";
  width: 100px;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 29px solid red;
  border-left: 29px solid #eee;
  border-right: 29px solid #eee;
}
#octagon:after {
  content: "";
  width: 100px;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 29px solid red;
  border-left: 29px solid #eee;
  border-right: 29px solid #eee;
}

Форма сердца Heart Shape

#heart {
  position: relative;
  width: 100px;
  height: 90px;
}
#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

Форма бесконечности Infinity Shape

#infinity {
  position: relative;
  width: 212px;
  height: 100px;
  box-sizing: content-box;
}
#infinity:before,
#infinity:after {
  content: "";
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border: 20px solid red;
  border-radius: 50px 50px 0 50px;
  transform: rotate(-45deg);
}
#infinity:after {
  left: auto;
  right: 0;
  border-radius: 50px 50px 50px 0;
  transform: rotate(45deg);
}

Квадратная форма алмаза (ромб) Diamond Square Shape

#diamond {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: red;
  position: relative;
  top: -50px;
}
#diamond:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: red;
}

Форма алмазного щита Diamond Shield Shape

#diamond-shield {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 20px solid red;
  position: relative;
  top: -50px;
}
#diamond-shield:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 20px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid red;
}

Узкая форма бриллианта Diamond Narrow Shape

#diamond-narrow {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 70px solid red;
  position: relative;
  top: -50px;
}
#diamond-narrow:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 70px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid red;
}

Форма ограненного алмаза Cut Diamond Shape

#cut-diamond {
  border-style: solid;
  border-color: transparent transparent red transparent;
  border-width: 0 25px 25px 25px;
  height: 0;
  width: 50px;
  box-sizing: content-box;
  position: relative;
  margin: 20px 0 50px 0;
}
#cut-diamond:after {
  content: "";
  position: absolute;
  top: 25px;
  left: -25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: red transparent transparent transparent;
  border-width: 70px 50px 0 50px;
}

Форма яйца Egg Shape

#egg {
  display: block;
  width: 126px;
  height: 180px;
  background-color: red;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Фигура Pac-Man

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

Форма разговорного пузыря Talk Bubble Shape

#talkbubble {
  width: 120px;
  height: 80px;
  background: red;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#talkbubble:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid red;
  border-bottom: 13px solid transparent;
}

RSS-канал Форма RSS Feed Shape

#rss {
  width: 20em;
  height: 20em;
  border-radius: 3em;
  background-color: #ff0000;
  font-size: 14px;
}
#rss:before {
  content: '';
  z-index: 1;
  display: block;
  height: 5em;
  width: 5em;
  background: #fff;
  border-radius: 50%;
  position: relative;
  top: 11.5em;
  left: 3.5em;
}
#rss:after {
  content: '';
  display: block;
  background: #ff0000;
  width: 13em;
  height: 13em;
  top: -2em;
  left: 3.8em;
  border-radius: 2.5em;
  position: relative;
  box-shadow:
    -2em 2em 0 0 #fff inset,
    -4em 4em 0 0 #ff0000 inset,
    -6em 6em 0 0 #fff inset
}

12-гранная форма 12 Point Burst Shape

#burst-12 {
  background: red;
  width: 80px;
  height: 80px;
  position: relative;
  text-align: center;
}
#burst-12:before,
#burst-12:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
}
#burst-12:before {
  transform: rotate(30deg);
}
#burst-12:after {
  transform: rotate(60deg);
}

8-ми точечная форма 8 Point Burst Shape

#burst-8 {
  background: red;
  width: 80px;
  height: 80px;
  position: relative;
  text-align: center;
  transform: rotate(20deg);
}
#burst-8:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
  transform: rotate(135deg);
}

Форма Инь-Ян Yin Yang Shape

#yin-yang {
  width: 96px;
  box-sizing: content-box;
  height: 48px;
  background: #eee;
  border-color: red;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
}
#yin-yang:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #eee;
  border: 18px solid red;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  box-sizing: content-box;
}
#yin-yang:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: red;
  border: 18px solid #eee;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  box-sizing: content-box;
}

Форма ленты для бейджа Badge Ribbon Shape

#badge-ribbon {
  position: relative;
  background: red;
  height: 100px;
  width: 100px;
  border-radius: 50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
  content: '';
  position: absolute;
  border-bottom: 70px solid red;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  top: 70px;
  left: -10px;
  transform: rotate(-140deg);
}
#badge-ribbon:after {
  left: auto;
  right: -10px;
  transform: rotate(140deg);
}

Форма космического захватчика Space Invader Shape

#space-invader {
  box-shadow: 0 0 0 1em red,
  0 1em 0 1em red,
  -2.5em 1.5em 0 .5em red,
  2.5em 1.5em 0 .5em red,
  -3em -3em 0 0 red,
  3em -3em 0 0 red,
  -2em -2em 0 0 red,
  2em -2em 0 0 red,
  -3em -1em 0 0 red,
  -2em -1em 0 0 red,
  2em -1em 0 0 red,
  3em -1em 0 0 red,
  -4em 0 0 0 red,
  -3em 0 0 0 red,
  3em 0 0 0 red,
  4em 0 0 0 red,
  -5em 1em 0 0 red,
  -4em 1em 0 0 red,
  4em 1em 0 0 red,
  5em 1em 0 0 red,
  -5em 2em 0 0 red,
  5em 2em 0 0 red,
  -5em 3em 0 0 red,
  -3em 3em 0 0 red,
  3em 3em 0 0 red,
  5em 3em 0 0 red,
  -2em 4em 0 0 red,
  -1em 4em 0 0 red,
  1em 4em 0 0 red,
  2em 4em 0 0 red;
  background: red;
  width: 1em;
  height: 1em;
  overflow: hidden;
  margin: 50px 0 70px 65px;
}

Форма ТВ-экрана TV Screen Shape

#tv {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: red;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
#tv:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

Форма шеврона Chevron Shape

#chevron {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
  width: 200px;
}
#chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: red;
  transform: skew(0deg, 6deg);
}
#chevron:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: red;
  transform: skew(0deg, -6deg);
}

Форма увеличительного стекла Magnifying Glass Shape

#magnifying-glass {
  font-size: 10em;
  display: inline-block;
  width: 0.4em;
  box-sizing: content-box;
  height: 0.4em;
  border: 0.1em solid red;
  position: relative;
  border-radius: 0.35em;
}
#magnifying-glass:before {
  content: "";
  display: inline-block;
  position: absolute;
  right: -0.25em;
  bottom: -0.1em;
  border-width: 0;
  background: red;
  width: 0.35em;
  height: 0.08em;
  transform: rotate(45deg);
}

Форма иконки Facebook Facebook Icon Shape

#facebook-icon {
  background: red;
  text-indent: -999em;
  width: 100px;
  height: 110px;
  box-sizing: content-box;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  border: 15px solid red;
  border-bottom: 0;
}
#facebook-icon:before {
  content: "/20";
  position: absolute;
  background: red;
  width: 40px;
  height: 90px;
  bottom: -30px;
  right: -37px;
  border: 20px solid #eee;
  border-radius: 25px;
  box-sizing: content-box;
}
#facebook-icon:after {
  content: "/20";
  position: absolute;
  width: 55px;
  top: 50px;
  height: 20px;
  background: #eee;
  right: 5px;
  box-sizing: content-box;
}

Форма луны Moon Shape

#moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}

Форма флага Flag Shape

#flag {
  width: 110px;
  height: 56px;
  box-sizing: content-box;
  padding-top: 15px;
  position: relative;
  background: red;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}
#flag:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 13px solid #eee;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}

Конусообразная форма Cone Shape

#cone {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid red;
  border-radius: 50%;
}

Форма креста Cross Shape

#cross {
  background: red;
  height: 100px;
  position: relative;
  width: 20px;
}
#cross:after {
  background: red;
  content: "";
  height: 20px;
  left: -40px;
  position: absolute;
  top: 40px;
  width: 100px;
}

Основа Base

#base {
  background: red;
  display: inline-block;
  height: 55px;
  margin-left: 20px;
  margin-top: 55px;
  position: relative;
  width: 100px;
}
#base:before {
  border-bottom: 35px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -35px;
  width: 0;
}

Указатель Pointer

#pointer {
  width: 200px;
  height: 40px;
  position: relative;
  background: red;
}
#pointer:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
#pointer:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

Форма замка Lock Shape

#lock {
  font-size: 8px;
  position: relative;
  width: 18em;
  height: 13em;
  border-radius: 2em;
  top: 10em;
  box-sizing: border-box;
  border: 3.5em solid red;
  border-right-width: 7.5em;
  border-left-width: 7.5em;
  margin: 0 0 6rem 0;
}
#lock:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 2.5em solid red;
  width: 14em;
  height: 12em;
  left: 50%;
  margin-left: -7em;
  top: -12em;
  border-top-left-radius: 7em;
  border-top-right-radius: 7em;
}
#lock:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 1em solid red;
  width: 5em;
  height: 8em;
  border-radius: 2.5em;
  left: 50%;
  top: -1em;
  margin-left: -2.5em;
}

Обратные углы Reverse Corners

#curved-corner-bottomleft,
#curved-corner-bottomright,
#curved-corner-topleft,
#curved-corner-topright {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
#curved-corner-bottomleft:before,
#curved-corner-bottomright:before,
#curved-corner-topleft:before,
#curved-corner-topright:before {
  content: "";
  display: block;
  width: 200%;
  height: 200%;
  position: absolute;
  border-radius: 50%;
}
#curved-corner-bottomleft:before {
  bottom: 0;
  left: 0;
  box-shadow: -50px 50px 0 0 red;
}
#curved-corner-bottomright:before {
  bottom: 0;
  right: 0;
  box-shadow: 50px 50px 0 0 red;
}
#curved-corner-topleft:before {
  top: 0;
  left: 0;
  box-shadow: -50px -50px 0 0 red;
}
#curved-corner-topright:before {
  top: 0;
  right: 0;
  box-shadow: 50px -50px 0 0 red;
}

Последнее обновление – 15 января 2023 в 15:02

Сегодня, благодаря возможностям языка описания внешнего вида HTML-документа, имеется возможность создавать самые разнообразные геометрические фигуры на чистом CSS. Каскадные таблицы стилей позволяют получить и квадрат, и круг, и треугольник, стрелку, звезду и даже цветок или сердечко, а также много других фигур.

Содержание:

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

При помощи CSS и HTML возможно создавать не только статичные фигуры. Им можно придавать движение. Посмотрите, например, как сделать анимацию стрелки-маятника. Или как украсить свой сайт новогодней мигающей гирляндой на HTML и CSS.

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

Окружность

Чтобы создать окружность с помощью CSS, воспользуемся тегом div. И зададим значение “circle” для идентификатора.

Код HTML

Код CSS

Для CSS необходимо задать значения “width” и “height”. Значение для border radius задаём равным половине от “width” и “height”.

Квадрат

Код HTML.
Как и в предыдущем примере, возьмём тег div с идентификатором “square”.

Код CSS.
Для создания квадрата в CSS, значения “width” и “height” должны быть равны друг другу.

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

Код HTML.

Код CSS.
Здесь действуем почти так же, как и при создании квадрата, однако теперь “width” должно быть больше, чем “height”.

Овал

Код HTML.
Для создания овала в CSS, зададим div с ID, равным “oval”.

Код CSS.
Овал напоминает окружность. Зададим радиус, равным половине значения “height”.

Треугольник

Код HTML.
Чтобы создать треугольник с помощью CSS, укажем div с ID, равным “triangle”.

Код CSS.
Для создания треугольника надо поиграть со свойством “border”.

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

Код HTML.
Давайте попробуем создать перевернутый треугольник вершиной вниз с помощью CSS. Значение идентификатора: “triangle_down”.

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

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

Код HTML.
Для создания треугольника с вершиной, направленной влево, зададим div с ID “triangle_left”.

Код CSS.

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

Код HTML.
В месте, где должен отображаться треугольник с вершиной, направленной вправо, напишем div с ID=”triangle_right”.

Код CSS.

Ромб

Код HTML.
Для создания ромба создадим div с ID=”rhomb”.

Код CSS.
Здесь, при создании ромба, используется свойство “transform” совместно со значениями “rotate”. Отображаются два треугольника, образуя ромб.

Ещё один ромб

Трапеция

Код HTML.
Для трапеции, напишем div с ID=”trapezium”.

Код CSS.

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

Код HTML.
Всё как обычно, для обозначения фигуры параллелограмм, зададим div с ID=”parallelogram”.

Код CSS.
Для отображения параллелограмма надо установить значение skew для transform с поворотом элемента на угол в 30 градусов.

Звезда

Код HTML.
Чтобы создать звезду, напишем div с ID=”star”.

Код CSS.
При создании звезды используем свойства transform равным rotate.

Шестиконечная звезда

Код HTML.

Код CSS.
Шестиконечная звезда создается с помощью свойства border.

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

Код HTML.
Для пятиугольника создадим div с ID=”pentagon”.

Код CSS.
Создать пятиугольник можно запросто при помощи двух элементов: трапеции и треугольника.

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

Код HTML.
Для отображения шестиугольника создадим div с ID=”hexagon”.

Код CSS.

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

Код HTML.
Для фигуры восьмиугольник, по образу и подобию, создадим div с ID=”octagon”.

Код CSS.
Чтобы увидеть восьмиугольник, создадим две трапециевидные формы и по бокам расположим два треугольника.

Сердце

Код HTML.
Для создания фигуры «сердце», впишем div с ID=”heart”.

Код CSS.
Сердце можно отобразить с помощью вращения элементов под разными углами. Потребуется смена значений свойства “transform-origin” для изменения позиции вращаемых элементов.

Яйцо

Код HTML.
Для обозначения фигуры яйцо, создадим div с ID=”egg”.

Код CSS.
Яйцо похоже на овал. Но в данном случае height должно быть больше, чем width. С помощью подбора значений для “radius” можно получить требуемый результат.

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

Код HTML.
Для создания фигуры «бесконечность», впишем div с ID=”infinity”.

Код CSS.
Бесконечность можно отобразить при изменениях свойства “border” и задания углов окружности:

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

Код HTML.
Для создания облачка для комментария надо всё так же написать div с ID=”comment_bubble”.

Код CSS.

Pacman

Код HTML.
Для создания фигуры пакман напишем div с ID=”pacman”.

Код CSS.

Лупа

Код HTML.

Код CSS.

Флажок

Код HTML.

Код CSS.

Крест

Код HTML.

Код CSS.

Стрелка

Код HTML.

Код CSS.

Конвертик или домик

Код HTML.

Код CSS.

Полумесяц

Код HTML.

Код CSS.

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

Время на прочтение
4 мин

Количество просмотров 909K

Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.

Квадрат

#square {
	width: 100px;
	height: 100px;
	background: red;
}

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

#rectangle {
	width: 200px;
	height: 100px;
	background: red;
}

Круг

#circle {
	width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

Овал

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

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

#triangle-up {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
}

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

#triangle-down {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
}

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

#triangle-left {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-right: 100px solid red;
	border-bottom: 50px solid transparent;
}

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

#triangle-right {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-left: 100px solid red;
	border-bottom: 50px solid transparent;
}

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

#triangle-topleft {
	width: 0;
	height: 0;
	border-top: 100px solid red; 
	border-right: 100px solid transparent;			
}

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

#triangle-topright {
	width: 0;
	height: 0;
	border-top: 100px solid red; 
	border-left: 100px solid transparent;
	
}

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

#triangle-bottomleft {
	width: 0;
	height: 0;
	border-bottom: 100px solid red; 
	border-right: 100px solid transparent;	
}

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

#triangle-bottomright {
	width: 0;
	height: 0;
	border-bottom: 100px solid red; 
	border-left: 100px solid transparent;
}

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

#parallelogram {
	width: 150px;
	height: 100px;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
	background: red;
}

Трапеция

#trapezoid {
	border-bottom: 100px solid red;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	height: 0;
	width: 100px;
}

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

#star-six {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
	position: relative;
}
#star-six:after {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
	position: absolute;
	content: "";
	top: 30px;
	left: -50px;
}

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

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);
   
}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

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

#pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
}
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent red;
}

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

#hexagon {
	width: 100px;
	height: 55px;
	background: red;
	position: relative;
}
#hexagon:before {
	content: "";
	position: absolute;
	top: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid red;
}
#hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid red;
}

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

#octagon {
	width: 100px;
	height: 100px;
	background: red;
	position: relative;
}
 
#octagon:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;    
	border-bottom: 29px solid red;
	border-left: 29px solid #eee;
	border-right: 29px solid #eee;
	width: 42px;
	height: 0;
}
 
#octagon:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;    
	border-top: 29px solid red;
	border-left: 29px solid #eee;
	border-right: 29px solid #eee;
	width: 42px;
	height: 0;
}

Сердечко

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -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%;
}

Знак бесконечности

#infinity {
    position: relative;
    width: 212px;
    height: 100px;
}
 
#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;    
    border: 20px solid red;
    -moz-border-radius: 50px 50px 0 50px;
         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);
}

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

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

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

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

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

Для того чтобы создавать любые фигуры, потребуются свойства, которые появились только в CSS3: transform и border-radius. Кроме них используются обычные параметры width, height,   background (для определения цвета фигуры), а также border-radius для округлых линий (окружности, овалы, скругленные углы и пр.).

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

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

HTML код

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

Например, ID  круга можно назвать Circle. Тогда, чтобы вставить круг в код, понадобится такой код:

Окружность

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

#circle { width: 200px; height: 200px; background: #7eef1e; –moz–border–radius: 100px; –webkit–border–radius: 100px; border–radius: 100px; }

Квадрат

Для создания квадрата особых хитростей не потребуется, нужно просто задать равные друг другу значения width и height :

#square { width: 200px; height: 200px; background: #f548fe; }

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

Аналогично квадрату задаем параметры width и height, но при этом значение width будет больше:

#rectangle { width: 200px; height: 100px; background: #4ea2f8; }

Овал

Овал – это «вытянутая» окружность, так его и задаем. Параметр width делаем в 2 раза больше, чем   height, а значение border-radius, как и для окружности, будет равно половине height:

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

Треугольник

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

#triangle { width: 0; height: 0; border–bottom: 200px solid #fdfa22; border–left: 100px solid transparent; border–right: 100px solid transparent; }

Чтобы выбрать другое направление треугольника, нужно задать другой набор границ. Так, для перевернутого треугольника используется параметр border-top вместо bottom. А для треугольников, которые «смотрят» влево или вправо, меняются значения left и right.

Ромб

Ромб можно делать несколькими методами. Проще всего вспомнить, что ромб – это два треугольника с общим основанием, направленные в противоположные стороны. Манипулировать удобнее всего будет свойством transform вместе со значениями свойства rotate:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

#diamond { width: 200px; height: 200px; background: #1ffe01; /* 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%; }

Трапеция

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

#trapezium { height: 0; width: 200px; border–bottom: 200px solid #ed3605; border–left: 100px solid transparent; border–right: 100px solid transparent; }

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

Параллелограмм также создать достаточно просто. Для этого устанавливаем transform равным skew, чтобы получить поворот на 30 градусов:

#parallelogram { width: 200px; height: 140px; background: #8835f8; –webkit–transform: skew(30deg); –moz–transform: skew(30deg); –o–transform: skew(30deg); transform: skew(30deg); }

Звезда пятиконечная

Звезды создаются при помощи последовательности манипуляций с границами формы при помощи свойства transform, равного rotate:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

#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); }

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

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

Пятиугольник – это два элемента, которые объединяются в один. Первый – это перевернутая трапеция, второй – треугольник, стоящий на основе этой трапеции:

#pentagon { width: 54px; position: relative; border–width: 50px 18px 0; border–style: solid; border–color: #287cac transparent; }

#pentagon:before { content: ""; height: 0; width: 0; position: absolute; top: –85px; left: –18px; border–width: 0 45px 35px; border–style: solid; border–color: transparent transparent #287cac; }

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

Сердце

Сердце создают при помощи вращения более простых элементов под разными углами с одновременной сменой значений transform-origin, что поможет изменить местоположение вращаемых элементов.

Подробнее – смотрите код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

#heart { position: relative; } #heart:before,#heart:after { content: ""; 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%; }

Яйцо

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

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

И в заключение

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

Пробуйте новые решения, внедряйте их, экспериментируйте. А наш движок html верстки сайтов поможет вам еще быстрее добиться нужных результатов!