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