Небольшая ёлочка с помощью CSS.

Изображение

Код небольшой, представляет собой несколько блоков отвечающих за разные части ёлки.
Структура:

Код: Выделить всё

<div class="spruce">
<div class="spruce-top"></div>
<div class="spruce-bottom"></div>
<div class="spruce-trunk"></div>
</div>
Ну и сами стили:

Код: Выделить всё

.spruce {
position: relative;
overflow: hidden;
height: 95px;
width: 90px;
}
.spruce-top,
.spruce-bottom {
position: relative;
height: 0;
width: 0;
}
.spruce-top {
border-bottom: 45px solid #06BE2D;
border-left: 35px solid transparent;
top: 0;
left: 10px;
}
.spruce-bottom {
border-bottom: 50px solid #06BE2D;
border-left: 45px solid transparent;
top: -15px;
left: 0;
}
.spruce-trunk {
position: relative;
background: #583D04;
top: -15px;
left: 40px;
width: 10px;
height: 15px;
}
.spruce-top:before,
.spruce-bottom:before {
content: '';
position: absolute;
width: 0;
height: 0;
left: 0;
top: 0;
}
.spruce-top:before {
border-bottom: 45px solid #089C27;
border-right: 35px solid transparent;
}
.spruce-bottom:before {
border-bottom: 50px solid #089C27;
border-right: 45px solid transparent;
}
Чтобы ёлочка выглядела более нарядно, можно добавить к ней пару шариков:

Код: Выделить всё

.spruce:before {
content: '';
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
top: 35px;
left: 20px;
z-index: 1;
box-shadow: inset 1px 1px 3px rgba(65, 65, 10, 0.7);

background: #E90101;
background: -moz-radial-gradient(center, ellipse cover, #FF889B 0%,#E90101 100%);
background: -webkit-radial-gradient(center, ellipse cover, #FF889B 0%,#E90101 100%);
background: radial-gradient(ellipse at center, #FF889B 0%,#E90101 100%);
}
.spruce:after {
content: '';
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
top: 68px;
left: 60px;
z-index: 1;
box-shadow: inset 1px 1px 3px rgba(65, 65, 10, 0.7);

background: #a9e4f7;
background: -moz-radial-gradient(center, ellipse cover, #a9e4f7 0%, #0fb4e7 100%);
background: -webkit-radial-gradient(center, ellipse cover, #a9e4f7 0%,#0fb4e7 100%);
background: radial-gradient(ellipse at center, #a9e4f7 0%,#0fb4e7 100%);
}
Изображение


А можно и вовсе сделать её стоящей в снегу.
В структуре перед последним закрывающим тегом </div> ставите:

Код: Выделить всё

<div class="spruce-snow"></div>
К стилям добавляете:

Код: Выделить всё

.spruce-snow {
position: relative;
top: -20px;
left: 0;
width: 65px;
height: 30px;
border-radius: 50%;
border: 1px solid rgba(204, 204, 204, 0.2);

background: #FFFFFF;
background: -moz-radial-gradient(right, #DDDDDD 10%, #FFFFFF 90%);
background: -webkit-radial-gradient(right, #DDDDDD 10%, #FFFFFF 90%);
background: radial-gradient(to left, #DDDDDD 10%, #FFFFFF 90%);
}
.spruce-snow:before {
content: '';
position: absolute;
top: 3px;
left: 40px;
width: 50px;
height: 30px;
border-radius: 50%;
border: 1px solid rgba(204, 204, 204, 0.2);

background: #FFFFFF;
background: -moz-radial-gradient(right, #DDDDDD 10%, #FFFFFF 90%);
background: -webkit-radial-gradient(right, #DDDDDD 10%, #FFFFFF 90%);
background: radial-gradient(to left, #DDDDDD 10%, #FFFFFF 90%);
}
И увеличиваете высоту дерева, в первом классе нашей ёлочки:

Код: Выделить всё

.spruce {
position: relative;
overflow: hidden;
height: 95px;
width: 90px;
}
меняете значение height: c 95px на 105px.

Пример на тёмном фоне:
Изображение

На правильность отображения во всех браузерах не проверял, но проблем вроде как быть не должно. Все современные браузеры поддерживающие псевдо-элементы будут отображать правильную картинку.
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.