Ёлка для сайта на чистом CSS
Когда человек действительно хочет чего-то, вся Вселенная вступает в сговор, чтобы помочь этому человеку осуществить свою мечту.
5-декабря-2023, 20:38 4 0
Эх Новый год, на что не пойдёшь ради того чтобы украсить веб сайт. Вот и сегодня я хочу с Вами поделиться простой елочкой для сайта, которая выполнена на HTML и CSS. По сути это просто 3 зелёных треугольника и ствол.
HTML
Начнём с основы:
<div class="tree">
<div class="tree-layer"></div>
<div class="tree-layer"></div>
<div class="tree-layer"></div>
<div class="tree-log"></div>
</div>CSS
Стилизуем первый треугольник:
.tree {
width: 120px;
}
.tree-layer,
.tree-log {
margin: 0 auto;
}
.tree-layer {
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 60px solid green;
}Дальше аналогично второй и третий:
.tree-layer:nth-child(2) {
margin-top: -30px;
border-left-width: 50px;
border-right-width: 50px;
border-bottom-width: 80px;
}
.tree-layer:nth-child(3) {
margin-top: -50px;
border-left-width: 60px;
border-right-width: 60px;
border-bottom-width: 100px;
}В конце - ствол дерева:
.tree-log {
width: 20px;
height: 30px;
background-color: saddlebrown;
}Вот и всё!!! Всех с наступающими праздниками!!!
