كيفية إنشاء حواف منحرفة مع المغلق

في هذا المنشور ، سننظر في كيفية إنشاء تأثير حافة الزاوية (أفقيًا) على إحدى صفحات الويب. بشكل أساسي ، يبدو مثل هذا:

إن وجود حافة بزاوية صغيرة ينبغي أن يجعل تصميم الويب لدينا يبدو أقل صلابة وممل. للقيام بهذه الخدعة ، سوف نستخدم عناصر-الزائفة ::قبل و ::بعد و تحويل CSS3.

باستخدام عناصر الزائفة

هذه التقنية تستخدم العناصر الزائفة ::قبل و ::بعد لزاوية حواف العنصر. في هذا المثال ، سنقوم بضبط الحافة السفلية.

 .block height: 400px؛ العرض: 100 ٪ ؛ الموقف: نسبي الخلفية: التدرج الخطي (إلى اليمين ، rgba (241،231،103،1) 0٪ ، rgba (254،182،69،1) 100٪) ؛  .block :: after content: "؛ العرض: 100٪ ؛ الارتفاع: 100٪ ؛ الموضع: مطلق ؛ الخلفية: وراثة ؛ z-index: -1 ؛ أسفل: 0 ؛ أصل التحويل: أسفل اليسار ؛ تحويل: skewY (3deg) ؛ 

دعونا نلخص.

ال تحويل المنشأ يحدد إحداثيات العنصر الذي نريد تحويله. في المثال أعلاه حددنا أسفل اليسار من شأنها أن تضع إحداثيات البداية على الجانب السفلي الأيسر من الكتلة.

ال تحويل: skewY (3deg) ؛ يجعل ::بعد كتلة الانحراف أو زاوية في 3 درجات. ونظرًا لأننا حددنا تنسيق الإحداثية على أنه يسار يسار ، فإن أسفل يمين الكتلة يرفع 3 درجات. إذا نحن مبادلة تحويل المنشأ إلى اسفل اليمين وسيتم رفع الزاوية السفلية اليسرى 3 درجات بدلاً من ذلك.

يمكنك إضافة خلفية بلون أو تدرج لوني لرؤية النتيجة.

اجعلها أسهل مع ساس ميكسين

لتسهيل هذا الأمر ، قمت بإنشاء مزيج Sass لإضافة الحواف الزاوية ، ناقصًا الصداع الناتج عن التعامل مع تعقيدات قواعد النمط. باستخدام المزيج التالي ، يمكنك تحديد الجانب بسرعة - أعلى اليسار أو أعلى اليمين أو أسفل اليسار أو أسفل اليمين - إلى الانحراف.

 mixin angle-edge ($ pos-top: null، $ angle-top: null، $ pos-btm: null، $ angle-btm: null) width: 100٪؛ الموقف: نسبي الخلفية: التدرج الخطي (إلى اليمين ، rgba (241،231،103،1) 0٪ ، rgba (254،182،69،1) 100٪) ؛ & :: قبل ، و :: after content: "؛ العرض: 100٪ ؛ الارتفاع: 100٪ ؛ الموضع: مطلق ؛ الخلفية: الوراثة ؛ z-index: -1 ؛ الانتقال: تخفيف جميع .5s ؛ @ إذا كان $ pos-top & :: before if $ pos-top == 'topleft' top: 0؛ أصل التحويل: right right؛ convert: skewY ($ angle-top)؛if $ pos-top = = 'topright' top: 0؛ أصل التحويل: أعلى اليسار ؛ convert: skewY (- $ angle-top)؛if $ pos-btm & :: after if $ pos-btm == 'bottomleft' bottom: 0؛ أصل التحويل: أسفل اليمين ؛ convert: skewY (- $ angle-btm)؛if $ pos-btm == 'bottomright' bottom: 0؛ convert-origin: left bottom؛ convert: skewY ($ angle-btm)؛ 

هناك أربعة متغيرات في mixin. المتغيرين الأولين, $ نقاط البيع أعلى و $ زاوية أعلى, حدد ال بدء الانطلاق و ال الدرجة العلمية. تحديد المتغيرات الأخيرة اثنين تنسيق و ال الدرجة العلمية ل الأسفل جانب.

إذا قمت بملء جميع المتغيرات الأربعة ، فيمكنك زوايا كلا الجانبين - أعلى وأسفل - للعنصر.

استخدم ساس @تتضمن بناء جملة لإدراج mixin إلى عنصر. يمكنك أن ترى الأمثلة أدناه:

لإضافة حافة منحرفة على أعلى اليسار جانب:

 .block include edge-edge (topleft، 3deg)؛  

لإضافة حافة منحرفة على أسفل اليمين جانب:

 .block include edge-edge (bottomright، 3deg)؛  

لإضافة حافة منحرفة على أعلى اليسار و أسفل اليمين جانب:

 .block include edge-edge (topleft، 3deg، bottomright، 3deg)؛  

أدناه هو التجريبي مع mixins تطبيقها. تغيير مربع الاختيار للتبديل إلى نمط آخر.

هذا هو!