CSS => Одиночные элементы

Площадь

Чтобы создать квадрат, определите элемент с шириной и высотой. В приведенном ниже примере у нас есть элемент с width и height по 100 пикселей каждый.

<div class="square"></div>

.square {
    width: 100px;
    height: 100px;
    background: rgb(246, 156, 85);
}

треугольники

Чтобы создать треугольник CSS, определите элемент с шириной и высотой 0 пикселей. Форма треугольника будет сформирована с использованием свойств границы. Для элемента с высотой и шириной 0 четыре границы (сверху, справа, внизу, слева) образуют треугольник. Вот элемент с 0 высотой / шириной и 4 различными цветными границами.

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

Размеры треугольника можно изменить, изменив ширину границы - более высокую, короче, однобокую и т. Д. В приведенных ниже примерах показан треугольник размером 50 × 50 пикселей.

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

<div class="triangle-up"></div>

.triangle-up {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid rgb(246, 156, 85);
}

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

<div class="triangle-down"></div>

.triangle-down {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid rgb(246, 156, 85);
}

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

<div class="triangle-right"></div>

.triangle-right {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 50px solid rgb(246, 156, 85);
}

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

<div class="triangle-left"></div>

.triangle-left {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 50px solid rgb(246, 156, 85);
}

Треугольник - Наведение вверх / вправо

<div class="triangle-up-right"></div>

.triangle-up-right {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 156, 85);
  border-left: 50px solid transparent;
}

Треугольник - Наведение вверх / влево

<div class="triangle-up-left"></div>

.triangle-up-left {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 156, 85);
  border-right: 50px solid transparent;
}

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

<div class="triangle-down-right"></div>

.triangle-down-right {
  width: 0;
  height: 0;
  border-bottom: 50px solid rgb(246, 156, 85);
  border-left: 50px solid transparent;
}

Треугольник - указатель вниз / влево

<div class="triangle-down-left"></div>

.triangle-down-left {
  width: 0;
  height: 0;
  border-bottom: 50px solid rgb(246, 156, 85);
  border-right: 50px solid transparent;
}

Всплески

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

Дополнительные квадраты создаются с использованием ::before и ::after psuedo-elements.

8-точечная развязка

8-точечная вспышка - это 2 слоистых квадрата. Нижний квадрат - это сам элемент, дополнительный квадрат создается с использованием :before псевдоэлементом. Дно повернуто на 20 °, верхний квадрат повернут на 135 °.

<div class="burst-8"></div>

.burst-8 {
  background: rgb(246, 156, 85);
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -ms-transform: rotate(20deg);
  transform: rotate(20eg);
}

.burst-8::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: rgb(246, 156, 85);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

12-точечная всплеск

12-точечный взрыв - это 3 слоистых квадрата. Нижний квадрат - это сам элемент, дополнительные квадраты создаются с использованием :before и :after псевдоэлементов. Дно повернуто на 0 °, следующий квадрат поворачивается на 30 °, а верх поворачивается на 60 °.

<div class="burst-12"></div>

.burst-12 {
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  background: rgb(246, 156, 85);
}

.burst-12::before, .burst-12::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: rgb(246, 156, 85);
}

.burst-12::before {
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.burst-12::after {
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

Круги и эллипсы

Круг

Чтобы создать круг , определите элемент с равной width и height ( квадрат ), а затем установите для свойства border-radius этого элемента значение 50% .

Скриншот

HTML

<div class="circle"></div>

CSS

.circle {
   width: 50px;
   height: 50px;
   background: rgb(246, 156, 85);
   border-radius: 50%;
}

Эллипс

Эллипс похож на круг, но с разными значениями для width и height .

Скриншот

HTML

<div class="oval"></div>

CSS

.oval {
  width: 50px;
  height: 80px;
  background: rgb(246, 156, 85);
  border-radius: 50%;
}

трапеция

Трапеция может быть выполнена блочным элементом с нулевой высотой (высота 0px ), шириной больше нуля и границей, прозрачной, за исключением одной стороны:

HTML:

<div class="trapezoid"></div>

CSS:

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

При изменении сторон границы можно настроить ориентацию трапеции.

куб

В этом примере показано, как создать куб, используя методы 2D-преобразования skewX() и skewY() .

HTML:

<div class="cube"></div>

CSS:

.cube {
  background: #dc2e2e;
  width: 100px;
  height: 100px;
  position: relative;
  margin: 50px;
}

.cube::before {
  content: '';
  display: inline-block;
  background: #f15757;
  width: 100px;
  height: 20px;
  transform: skewX(-40deg);
  position: absolute;
  top: -20px;
  left: 8px;
}

.cube::after {
  content: '';
  display: inline-block;
  background: #9e1515;
  width: 16px;
  height: 100px;
  transform: skewY(-50deg);
  position: absolute;
  top: -10px;
  left: 100%;
}

См. Демонстрацию

пирамида

В этом примере показано, как создать пирамиду с использованием границ и методов 2D-преобразования skewY() и rotate() skewY() .

HTML:

<div class="pyramid"></div>

CSS:

.pyramid {
  width: 100px;
  height: 200px;
  position: relative;
  margin: 50px;
}

.pyramid::before,.pyramid::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: 50px solid;
  position: absolute;
}

.pyramid::before {
  border-color: transparent transparent #ff5656 transparent;
  transform: scaleY(2) skewY(-40deg) rotate(45deg);
}

.pyramid::after {
  border-color: transparent transparent #d64444 transparent;
  transform: scaleY(2) skewY(40deg) rotate(-45deg);
}

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

CSS
Одиночные элементы

Поиск…