Закругление углов блока средствами HTML/CSS
От автора: Часто перед начинающим верстальщиком возникает ряд задач, которые ему нужно разрешить для выполнения верстки страницы. Одна из наиболее часто встречаемых проблем – это закругление углов блока средствами HTML/CSS.
Сегодня мы разберем и посмотрим на то, как можно закруглить углы блока. В этой статье описан метод закругления углов при помощи позиционного построения блоков.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Шаг 1
Создайте папку (например, folder) и поместите в ее директорию простую HTML страницу (например, index.html). Эта страница должна содержать следующий код:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Для того чтобы понять где, что и как, мы разберем код нашего файла index.html более подробно.
Итак, "xb1","xb2","xb3","xb4","xb5","xb6","xb7"- это блоки, при помощи которых и создаются наши закругленные углы. Данные блоки расположены горизонтально один под другим, как пешеходная зебра, к примеру. Т.е. вначале идет блок "xb1", затем блок "xb2", после этого блок "xb3"и так до блока "xb7" включительно. Все блоки отличны, либо равны, по своей ширине от блока "соседа" (в противном случае закругления углов блока у нас не было бы, в итоге мы получили бы обычный прямоугольник).
Блок "top_corners" — блок, в котором расположены блоки "xb1","xb2","xb3","xb4","xb5","xb6","xb7" в порядке возрастания. За счет данной последовательности ("xb1","xb2",…,"xb7") образуются верхние закругленные правый и левый углы нашего блока.
Блок "down_corners" — блок, в котором расположены блоки "xb7","xb6","xb5","xb4","xb3","xb2","xb1" в порядке убывания. Если придерживаться этой последовательности ("xb7","xb6",…,"xb1",), то у нас образуются закругленные нижние правый и левый углы.
Т.о., мы создали все четыре закругленных угла блока (при помощи блоков "xb1","xb2",…,"xb7"). Но у вас наверняка возникнет вопрос: " – Зачем нам блок "content"?". Данный блок является контентной частью нашего блока (блока с закругленными углами). Если в блоке должна располагаться какая-либо информация, то ее необходимо прописывать именно в рамках блока "content".
Теперь мы понимаем, что наш создаваемый блок с закругленными углами состоит из 3-х подблоков.
Также вашему вниманию хочу привести увеличенное изображение левого верхнего угла блока: