! Сегодня

Главная » Web и Технологии » Ёлка для сайта на чистом CSS

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

Влюбиться можно в красоту, но полюбить – лишь только душу!

5-декабря-2023, 20:38   14   0

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

Эх Новый год, на что не пойдёшь ради того чтобы украсить веб сайт. Вот и сегодня я хочу с Вами поделиться простой елочкой для сайта, которая выполнена на 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;
}

Вот и всё!!! Всех с наступающими праздниками!!!

Поделиться

Tags

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Спутник земли ?

Редакторы выбирают

Web и Технологии