Как сделать вкладки в форме трапеций

Трапеции — это еще более генерализованные фигуры, чем параллелограммы: у них только две параллельные стороны. Две оставшиеся могут быть наклонены под любым углом. Эти фигуры тради- ционно славятся сложностью создания с помощью чистого CSS, но при этом очень часто используются в веб-дизайне, особенно для оформления вкладок. Если разработчики не имитируют их посредством скрупулезно подготовленных фоновых изображений, то воссоздают с помощью прямоугольника с двумя треугольниками, сделанными из рамок, по бокам. Хотя эта техника экономит HTTP-запросы, которые могли бы понадобиться вследствие использования дополнительных изображений, и легко адаптируется к изменению размеров элементов, она все же далека от совершенства. Нам приходится создавать практически бесполезные псевдоэлементы, а кроме того, мы невероятно ограничены в вариантах стилизации. Например, попробуйте добавить рамку, фоновый узор или скругленные углы к такой вкладке. Читать далее