Как да създам успоредник в CSS, Как да създам уебсайт

  • Начало & nbsp/& nbspУроци & nbsp/& nbspCSS уроци & nbsp/& nbspCSS Рецепти & nbsp/& nbspФорми & nbsp/& nbsp
  • Как да създам успоредник в CSS

Как да създам успоредник в CSS

Проблем

Паралелограмите са удължена версия на правоъгълници: страните им са успоредни, но ъглите не са непременно прави. Във визуалния дизайн те често се използват, за да добавят динамика и усещане за движение към дизайна.
Нека се опитаме да създадем скосен бутон, оформен като CSS връзка. Нашата отправна точка ще бъде обикновен плосък бутон с много опростен дизайн. Ще му придадем формата на скосен правоъгълник, използвайки трансформацията skew (), (писах за трансформациите в css тук) по следния начин:
преобразуване: skewX (-45deg);
В резултат обаче съдържанието на бутона също беше изкривено, стана грозно и нечетливо. Има ли начин да създадете скосени контейнери, без да изкривявате съдържанието?

създам

Решение с вложени елементи

CSS.бутон
.бутон> div
Както можете да видите, този подход работи, но изисква допълнителен HTML елемент. Не се притеснявайте обаче, ако промяната на маркировката е неприемлива за вас или ако наистина искате да поддържате чистата си маркировка - има и чисто CSS решение.
ОПИТАЙТЕ СЕБЕ СИ!
http://play.csssecrets.io/parallelograms

Нашият бутон преди да приложим каквито и да е трансформации

уебсайт

Нашият скосен бутон, който е труден за четене

Псевдоелементно решение

Друга идея е да се създаде псевдоелемент, към който ще бъдат приложени всички стилове (фонове, рамки и т.н.) и след това да се трансформира. Тъй като нашето съдържание не принадлежи на псевдоелемента, преобразуването няма да се разпространи към него.