tgoop.com/code_and_travel/282
Last Update:
Как сделать треугольник?
А также круг, квадрат, звезду и сердечко с помощью CSS.
Первое, что необходимо помнить: лишние теги не к чему. Все то, что можно сделать с помощью псевдоэлементов, делаем через них. А в случае с фигурами это всегда возможно.
Что такое “псевдоэлемент”, можно почитать здесь. Кратко скажу, что это - ключевое слово, добавляемое в CSS к селектору, которое позволяет задавать дополнительные свойства для невизуальных элементов (обычно до или после) текущего. Новый тег они не образуют, однако, позволяют стилизовать их практически также, как если бы перед нами был полноправный тег.
Перейдем к фигурам. Для задания квадрата никакие псевдоэлементы не нужны:
#square {
width: 100px;
height: 100px;
background: red;
}
Просто задаем одинаковую ширину и высоту.
Чтобы сделать круг, потребуется добавить еще одно свойство: border-radius, отвечающее за скругление. Его значение в 50% показывает, что скругление будет происходить наполовину, т.е. мы квадрат превратим в полноценный круг:
#circle {
width: 100px;
height: 100px;
background: red;
border-radius: 50%
}
Даже с треугольником можно обойтись без псевдоэлементов. Код в этом случае будет уже в 5 строк:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
т.е. мы обнуляем высоту и ширину элемента, но зато с помощью border рисует границу фигуры. В текущем примере наш равнобедренный треугольник будет повернут кверху. Однако, если вам захочется реализовать повернутый вниз треугольник, всего лишь замените border-bottom на border-top: 100px solid red. А если хотите повернутый влево, то максимальное количество пикселей поставьте у border-right.
А вот более сложная графика уже предполагает псевдоэлементы. Как, например, звезда или сердце.
Предлагаю вам изучить примеры и вдохновиться или самостоятельно. Больше инфо и примеров здесь.
BY Code&Travel
Share with your friend now:
tgoop.com/code_and_travel/282