Саныч, посмотрите на деревянные рамки для фотографий или картин. Чтобы они смотрелись красиво, что они делаются из 4 "досок" с соединением под углом 45 градусов.
Аналогично в браузерах.
Схема границ элемента для ширины границы больше 1рх
Если смотреть только на линии толщиной в 1 px, то кажется что они прямоугольные. Если смотреть на границы с шириной 2-3 пикселя и имеющих различный цвет (имитация объема у таблицы) то уже становиться слегка заметен срез, а если вы поиграете с шириной границы, то увидите картину, аналогичную рисунку выше.
Теперь нам нужно получить треугольник.
1) Если попытаться добавить только нижнюю границу, то получиться прямоугольник, который заканчивается на уровне правого и левого края элемента.
2) Чтобы получить границу под углом 45 градусов, нужно добавить границы(для наглядности сначала разноцветные)
3) Убираем плоскость, которая обрезает верхний угол прямоугольника
4) Делаем боковые границы прозрачными (белый цвет - фоновый цвет документа)
Треугольник готов.
Для получения углов, отличных от 45 градусов необходимо изменить соотношение в ширине границ.
К примеру(угол относительно горизонтали - нижняя граница: левая граница):
30 градусов - 5:3
45 градусов - 1:1
60 градусов - 3:5
Для правой стороны - симметрично.
P.S. До этого момента не догадывался о том, как добиться углов отличных от 45 градусов
|