Ёлка на чистом CSS

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

Готово!

Результат

Теги: css

Редактировать