С помощью некоторых элементов div и базовых стилей вы можете создавать базовые фигуры… А базовые фигуры? Можно делать сложные, как в геометрии!
Возможно, вы уже знаете, что с помощью CSS вы можете сделать много вещей, никаких реальных ограничений нет. Может быть, только ваше терпение заставить все работать. Но геометрия не так уж и сложна. Например, давайте начнем с самой простой формы: квадрат, а также, возможно, прямоугольник:
.square {
width: 100px;
height: 100px;
background: #dd0000;
}
.rectangle {
width: 200px;
height: 100px;
background: #dd0000;
}
И все, что мы сделали здесь, это использовали элемент div, для которого мы установили ширину, высоту и цвет фона, чтобы сделать его видимым на странице. Ширина квадрата равна высоте, а ширина прямоугольника удвоена.
Но что, если мы сделаем что-то менее острое? Да, я имею в виду круг или овал. И для этого давайте воспользуемся двумя предыдущими формами, которые мы уже сделали:
.circle {
width: 100px;
height: 100px;
background: #00dd00;
border-radius: 100%;
}
.oval {
width: 200px;
height: 100px;
background: #00dd00;
border-radius: 100%;
}
Это настолько просто, что все, что нам нужно добавить, это свойство border-radius. Исходя из этого, вы можете скруглить углы элемента, вы можете скруглить их только для того, чтобы форма выглядела более гладкой или удобной, или вы можете просто увеличить значение и сделать их идеально круглыми. Вам не нужно использовать значение 100% для этого, работает даже с 99px. На самом деле, я видел на многих веб-сайтах 99px или 999px вместо процентного значения. Я предпочитаю 100%, потому что для меня это имеет смысл: «Вы хотите что-то округлить? Сколько? С максимальной суммой? Итак… Он станет кругом?».
Давайте продолжим и создадим несколько треугольников. Теперь для этой формы есть несколько лайфхаков. Трудным способом было бы использовать несколько квадратов, только один из цветов прямоугольника, а с другими и свойство преобразования попытаться скрыть половину его квадратами цвета фона. Хорошая часть здесь заключается в том, что есть более простой способ сделать это. Мы можем использовать огромные рамки, и код будет выглядеть примерно так:
.triangle1 {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #0000dd;
}
.triangle2 {
border-left: 100px solid transparent;
border-bottom: 100px solid #0000dd;
}
Если у вас есть вопросы вроде «Как?» или «Почему?» прямо сейчас я могу полностью понять это. Итак, давайте разобьем его на части. Если мы установим границу с большим значением, мы увидим, как это работает на самом деле.
.border1 {
border-top: 50px solid cyan;
border-right: 50px solid magenta;
border-bottom: 50px solid yellow;
border-left: 50px solid black;
}
.border2 {
border-top: 50px solid cyan;
border-right: 50px solid magenta;
border-bottom: 50px solid yellow;
border-left: 50px solid black;
width: 50px;
height: 50px;
}
Граница образует треугольник, когда элемент заканчивается. В этом случае наш элемент имеет ширину или высоту 0 пикселей. Если мы увеличим его, скажем, на 50 пикселей по ширине и высоте, вы, вероятно, еще лучше поймете, что происходит. Как вы можете видеть, если элемент имеет размер, треугольники менее заострены и больше похожи на трапецию. И таким же образом вы можете сделать трапецию, если хотите, на основе треугольников, состоящих из границ и некоторой ширины и высоты.
Имейте в виду тот факт, что вы также можете использовать псевдоклассы :before или :after для создания более сложных форм. Например, пятиугольник создается с помощью :before следующим образом:
.pentagon {
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-style: solid;
border-color: brown 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 brown;
}
Мы используем трапецию в ее основании, а вершина состоит из треугольника, созданного в :before. Обе формы имеют одинаковый цвет и идеально выровнены, чтобы создать иллюзию того, что это только одна форма.
Как насчет чего-то более сложного сейчас? Из школы мы знаем, что трехмерный объект состоит из двухмерных фигур. Мы знаем, как создавать 2D-фигуры, поэтому давайте попробуем создать объект. Давайте создадим простой куб:
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face right">Right</div>
<div class="face left">Left</div>
<div class="face bottom">Bottom</div>
<div class="face top">Top</div>
</div>
.cube {
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(-45deg) rotateY(45deg);
}
.face {
position: absolute;
width: 100px;
height: 100px;
background-color: #333;
color: #fff;
text-align: center;
font-size: 25px;
line-height: 100px;
}
.front {
transform: translateZ(50px);
background-color: #666;
}
.back {
transform: translateZ(-50px) rotateY(180deg);
}
.right {
transform: rotateY(90deg) translateZ(50px);
}
.left {
transform: rotateY(-90deg) translateZ(50px);
background-color: #333;
}
.top {
transform: rotateX(90deg) translateZ(50px);
background-color: #444;
}
.bottom {
transform: rotateX(-90deg) translateZ(50px);
}
Здесь может быть много CSS только для простой 3D-формы, но давайте, мы работаем в 3-х измерениях. Для такого вида куба достаточно сделать только его половину, нижняя, задняя и правая стороны не видны, они есть, но из-за положения куба мы их не видим. Если хотите, можете скопировать весь код и попробовать сделать анимацию, в которой куб вращается, и тогда вы увидите все стороны.
Короче говоря, мы начали с классов «.cube» и «.face», чтобы создать наш шаблон того, каким должен быть куб, и после этого мы только расположили все стороны, чтобы они выглядели как куб на основе преобразования. Свойство преобразования настолько продвинуто, что я думаю, что могу написать статью только о нем, но сейчас мы сосредоточимся только на вращении и переводе. Вращение вращает фигуру по определенной оси, а перевод перемещает ее.
И теперь, когда вы знаете, как делать такие вещи, вы можете спросить: «А зачем мне что-то подобное на сайте?» и мой ответ: «Может быть, нет».
Это правда, что вы можете создавать приятные пользовательские элементы, такие как кнопки или навигационные панели, с помощью этих форм, вы можете делать сложные анимации или даже буквальное искусство с ними (если вы делаете сложное произведение искусства только с помощью CSS, я хотел бы увидеть это, есть люди что сделал с ним сумасшедшие вещи).
Но и вам не обязательно их использовать. Хорошая вещь о них заключается в том, что вы знаете о них, и если иногда вам нужно будет немного поиграть с некоторыми формами, вы будете знать, что CSS может это сделать.
Я хотел бы предложить вам некоторую биографию, чтобы углубиться в тему, если хотите, но, честно говоря, я не знаю хорошего веб-сайта или книги, которая объясняет все это. Итак, вам лучше всего поискать в Google что-то вроде: «Как сделать [форму] в CSS?» И наверняка найдете что-нибудь полезное.
Моей единственной рекомендацией будет раздел CSS из MDN (Mozilla Web Docs), где вы можете углубиться во все свойства CSS и, возможно, найдете что-то интересное, что сможете использовать.
И с учетом всего сказанного, оставайтесь творческими.
