Как да създам успоредник в 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

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

уебсайт

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

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

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

Нека опитаме тази техника, за да стилизираме връзката, както в предишния раздел. Искаме маржът на нашия псевдоелемент да остане гъвкав и автоматично да наследи размерите на своя предшественик, дори когато е дефиниран от съдържание. Най-лесният начин да постигнете това е да приложите позиция: спрямо предшественика и позиция: абсолютна към генерираното съдържание и да направите всички отмествания нула, така че да се простира хоризонтално и вертикално до размера на своя родител. Ето как би изглеждал необходимият код:
.бутон
позиция: относителна;
/ * цвят на текста, подложка и др. * /
>
.бутон: преди
съдържание: ";
позиция: абсолютна;
отгоре: 0; вдясно: 0; отдолу: 0; ляво: 0;
>
Досега генерираното поле се показва над съдържанието, засенчвайки го и веднага щом определим някакъв фон за него, съдържанието става невидимо. За да поправите това, приложете z-index: -1 към псевдоелемента, за да го преместите под неговия родител.

След това най-накрая можете да приложите необходимите трансформации към псевдоелемента и да се насладите на резултата. Окончателният код е показан по-долу; осигурява същия визуален резултат като предишната техника:
.бутон
позиция: относителна;
/ * цвят на текста, подложка и др. * /
>
.бутон: преди
съдържание: ";/* за генериране на полето * /
позиция: абсолютна;
отгоре: 0; вдясно: 0; отдолу: 0; ляво: 0;
z-индекс: -1;
фон: # 58a;
трансформация: изкривяване (45deg);
>
Ако приложите този ефект към елемент, който е вграден по подразбиране, не забравяйте да зададете различна стойност на свойството на дисплея, като вграден блок или блок, или преобразуването няма да бъде приложено. Същото важи и за вътрешния елемент.

създам

В момента нашият псевдоелемент е над съдържанието си, така че прилагането на фон: # 58a към него прави съдържанието невъзможно да се види
Тези техники са полезни за повече от просто изкривяване () трансформации. Те могат да се използват с всякакви други трансформации, за да се промени формата на даден елемент, без да се засяга съдържанието му.