#7 - Стилі для блоків

Для створення блоків HTML використовується тег div. За допомогою CSS можна додати безліч стилів до блоку та створити з блоку практично будь-яку фігуру.

Наприклад, ми створили HTML блок і додали до нього кілька стилів. За підсумком вийшов лимон:

Думаєте що на створення такого об'єкта піде безліч сил і безліч рядків коду? Як би не так!

Нижче представлені всі стилі для створення такого ж лимона:

.limonchik {
	width: 200px; /* Вказуємо ширину та висоту об'єкта */
	height: 200px;
	background: #F5F240; /* Вказуємо заднє тло - жовте */
	border: 2px solid #F0D900; /* Обведення 2 пікселя */
	border-radius: 10px 150px 30px 150px; /* Скруглення кутів */
}

CSS моментально змінив відображення тега div, причому для реалізації всього знадобилося лише кілька рядків коду.

Робота з обведенням (border)

.borders {
 width: 0; height: 0;
 border: 100px solid;
 border-color: #FF5B45 #1D532A #6DCDF7 #FFE02E;
}