Трюки CSS: многоугольники с помощью свойства border

HTML блоки с нулевой шириной можно использовать для создания многоугольников. Для этого достаточно изменить значения свойств цвета и ширины границы.

Ниже создан блок example с нулевой шириной. Границы сверху, снизу и по бокам покрашены в разные цвета.

Параметры границ изменяются с помощью формы. Чтобы скрыть какую-либо границу, достаточно указать значение transparent для цвета соответствующей границы.

#example {
border-top-width: px;
border-top-color: ;
border-right-width: px;
border-right-color: ;
border-bottom-width: px;
border-bottom-color: ;
border-left-width: px;
border-left-color: ;
}

Поделится ссылкой: