Смешное и нелепое название для статьи, но лучшего придумать не мог, так как это, по моему мнению, наиболее точно отвечает своей задаче.

А точнее - задает вопрос - почему при создании треугольников на CSS с помощью псевдоэлементов :before и :after получаются именно треугольники? Методика создания таких треугольников хорошо расписана в Интернете, повторять не буду. Кому интересно, легко ее найдет. Вопрос как раз в том, почему в итоге получаются треугольники, а не прямоугольники, к примеру?

Начнем сначала и посмотрим, а как вообще браузер рисует границы для блоков. Если вы думаете (и я раньше), что браузеры генерируют границы в виде прямоугольных блоков, то глубоко ошибаетесь. Ниже покажу, как я сам раньше представлял себе этот вопрос, и как он выглядит на самом деле.

Как раньше представлял:

Ошибочное представление границ блока

Как есть на самом деле:

Правильное представление границ блока

То есть, браузер отрисовывает границы под углом в 45 градусов. Точно также, как делают оконные рамы, если “на пальцах”.

Ну хорошо, с этим разобрались. Пусть будет так, но причем здесь угол в границах и треугольник? Для этого продолжим наше небольшое исследование. Оставим подопытный прямоугольник и начнем его понемногу “урезать”.

Сначала уберем у него высоту и ширину. В результате получиться такая картина:

Блок без ширины и высоты

Теперь уберем нижнюю границу у этого блока и получим такое:

Блок без нижней границы

Ну а теперь осталось дело за малым - сделаем левую и правую границы без цвета, на языке CSS - transparent.

Вуаля:

Блок с прозрачными боковыми границами

Вот и получился треугольник на CSS. Оказалось - все просто и логично.

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

Точно также можно создавать треугольник, который “смотрит” влево, вправо, вверх. Просто нужно поменять прозрачные границы для этого блока.

Например, для треугольника, который смотрит вправо, нужно сделать верхнюю и нижнюю границы прозрачными, левую оставить “как есть”, а правую границу убрать.

На этом все.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке