Како да направите искривљене ивице помоћу ЦСС-а

У овом посту, погледаћемо како можемо да направимо англед ефекат ивице (хоризонтално) на веб страници. У основи, изгледа нешто овако:

Имати благо нагнуту ивицу треба да учини наш веб изглед мање ригидним и досадним. Да би урадили овај трик, користићемо псеудо-елементи ::пре него што и ::после и ЦСС3 Трансформ.

Коришћење псеудо елемената

Ова техника користи псеудо-елементе ::пре него што и ::после за угађање ивица елемената. У овом примеру, ми ћемо подешавати доњу ивицу.

 .блок висина: 400пк; ширина: 100%; позиција: релативна; позадина: линеарно-градијент (на десно, ргба (241,231,103,1) 0%, ргба (254,182,69,1) 100%);  .блоцк :: афтер цонтент: "; ширина: 100%; висина: 100%; позиција: апсолутна; позадина: инхерит; з-индекс: -1; дно: 0; трансформ-оригин: лево дно; трансформација: скевИ (3дег); 

Да поновимо.

Тхе трансформ-оригин специфицира координате елемента који желимо трансформирати. У горњем примјеру смо навели лефт боттом то ће ставити почетне координате у доњи лијеви дио блока.

Тхе трансформ: скевИ (3дег); чини ::после блокирати косу или угао на 3 степена. Пошто смо одредили почетну координату као доњу леву, доњи десни део блока подиже 3 степена. Ако замијенимо трансформ-оригин до ригхт боттом а доњи леви угао ће бити подигнут уместо 3 степена.

Можете додати једнобојну позадину или градијент како бисте видјели резултат.

Учините то лакшим са Сасс Микином

Да би ово било лакше, створио сам Сасс микин да бих додао нагнуте ивице, уместо главобоља из бављења сложеношћу стилских правила. Са следећим миксинима можете брзо да одредите страну - горе-лево, горе-десно, доле-лево или дно-десно - да искосите.

 @микин англе-едге ($ пос-топ: нулл, $ англе-топ: нулл, $ пос-бтм: нулл, $ англе-бтм: нулл) видтх: 100%; позиција: релативна; позадина: линеарно-градијент (на десно, ргба (241,231,103,1) 0%, ргба (254,182,69,1) 100%); & :: бефоре, & :: афтер цонтент: "; видтх: 100%; хеигхт: 100%; поситион: абсолуте; бацкгроунд: инхерит; з-индек: -1; пос-топ & :: бефоре @иф $ пос-топ == 'топлефт' врх: 0; трансформ-оригин: десно горе; трансформ: скевИ ($ англе-топ); @иф $ пос-топ = = 'топригхт' топ: 0; трансформ-оригин: леви врх; трансформ: скевИ (- $ англе-топ); @иф $ пос-бтм & :: афтер @иф $ пос-бтм == 'боттомлефт' боттом: 0; трансформ-оригин: десно дно; трансформ: скевИ (- $ англе-бтм); @иф $ пос-бтм == 'боттомригхт' боттом: 0; трансформ-оригин: лево дно; трансформ: скевИ ($ англе-бтм); 

У миксину постоје четири варијабле. Прве две варијабле, $ пос-топ и $ англе-топ, наведите горња почетна координата анд тхе степен. У последње две варијабле наводи се координирати анд тхе степен за дно страни.

Ако попуните све четири варијабле, можете нагнути обје стране - врх и дно елемента.

Користи Сасс @инцлуде синтакса за уметање микина у елемент. Примјере можете видјети у наставку:

Да бисте додали искривљену ивицу горе лево страна:

 .блок @инцлуде англе-едге (топлефт, 3дег);  

Да бисте додали искривљену ивицу доле десно страна:

 .блок @инцлуде англе-едге (доле, 3дег);  

Да бисте додали искривљену ивицу горе лево и доле десно страна:

 .блок @инцлуде англе-едге (топлефт, 3дег, боттомригхт, 3дег);  

Испод је демо са примењеним миксинима. Промените поље за избор да бисте се пребацили на други стил.

То је то!