كيفية إنشاء الشريط المغلق

نحن أيضا تعيين الأبعاد الأساسية و ال لون الخلفية مع CSS.

 .بطاقة لون الخلفية: البيج؛ الارتفاع: 300 بكسل ؛ الهامش: 40 بكسل ؛ العرض: 500 بكسل ؛  

الجزء الأوسط من الشريط

سوف نستخدم متغير CSS (يسمح لنا بتخزين وإعادة استخدام قيمة CSS) تسمى --ص إلى تخزين قيمة الحشو. قيمة حشوة يستخدم الخاصية فار (- ع) بناء الجملة لحشيش اليسار واليمين من الشريط بحيث يمكن أن يكون اتسعت بسهولة. ال --ص المتغير في وقت لاحق سيكون إعادة استخدامها عدة مرات. هذا يجعل كودنا مرنا.

 .الشريط - p: 15 بكسل ؛ لون الخلفية: rgb (170،170،170) ؛ الارتفاع: 60 بكسل ؛ الحشو: 0 فار (- ع) ؛ العرض: 100 ٪ ؛  

في لقطة الشاشة أدناه ، يمكنك رؤية كيف يفترض أن يظهر العرض التوضيحي في هذه المرحلة:

توسيط الشريط

نحن بحاجة أيضا إلى توسيط الشريط. نحن ادفعه إلى اليسار بحجم الحشو (التي تحمل علامة --ص متغير) باستخدام تحديد المواقع النسبية.

 .الشريط - p: 15 بكسل ؛ لون الخلفية: rgb (170،170،170) ؛ الارتفاع: 60 بكسل ؛ الحشو: 0 فار (- ع) ؛ الموقف: نسبي اليمين: var (- p) ؛ العرض: 100 ٪ ؛  

العرض التوضيحي المحدث:

جانبي الشريط

الآن نخلق الجانبين الأيسر والأيمن من الشريط يجب أن ينحني على ما يبدو حول حافة البطاقة. للقيام بذلك ، نستخدم كل من :قبل و :بعد العناصر الزائفة لل .شريط.

كلا العناصر الزائفة ترث لون خلفية .شريط, ونحن نستخدم مرشح: السطوع (.5) حكم لتغميق لونهم قليلا. هم ايضا وضع تماما داخل الوالدين (وضع نسبيا).

عرضهم يحتاج إلى أن يكون نفس حجم الحشو, ونحن نضعهم إلى الأطراف اليمنى واليسرى من الشريط باستخدام اليسار: 0 و صحيح: 0 قواعد الاسلوب.

 .ribbon: before، .ribbon: after background-color: inherit؛ المحتوى: "؛ العرض: كتلة ؛ مرشح: السطوع (.5) ؛ الارتفاع: 100 ٪ ؛ الموضع: مطلق ؛ العرض: var (- ع) ؛ .ribbon: قبل left: 0؛ .ribbon: after  اليمين: 0 ؛ 

الآن الشريط مع الجوانب التي أضفناها للتو يبدو كما يلي:

تحريف الجانبين

لجعل جانبي الشريط تبدو عازمة, نحتاج إلى تشويه الجانبين بنسبة 45 درجة. ال تحويل: مشوه () حكم CSS يشوه عناصر عموديا.

 .الشريط: قبل left: 0؛ تحويل: skewy (45deg)؛  .ribbon: after right: 0؛ تحويل: skewy (-45deg)؛  

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

محاذاة الجانبين

إلى تحديد الطول المناسب من خلالها نحتاج إلى تحريك الجوانب لأسفل ، ننتقل إلى علم المثلثات. ما نحتاج إلى العثور عليه هو س, مثل ذ هو عرض الجانبين (يساوي حجم الحشو لل .شريط) ، والزاوية θ 45 درجة (زاوية الانحراف).

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

إذا كنت تستخدم أي CSS preprocessor تحقق مما إذا كان لديه أسمر وظيفة ، وإلا الرجوع إلى مخطط الظل أو آلة حاسبة ل معرفة قيمة الظل للزاوية. نحن محظوظون كذلك تان 45 درجة هو 1, مما يعني أن قيمة س يساوي ذ في حالتنا هذه.

 .ribbon: before، .ribbon: after background-color: inherit؛ المحتوى: "؛ العرض: كتلة ؛ مرشح: السطوع (.5) ؛ الارتفاع: 100 ٪ ؛ الموضع: مطلق ؛ أعلى: calc (var (- p) / 2) ؛ العرض: var (- p) ؛ 

منذ س كان لا بد من النصف ، ونحن نستخدم احسب () وظيفة المغلق لأداء تقسيم --ص متغير.

وأخيرا نحن بحاجة إلى قم بمحاذاة الجانبين على طول المحور z كذلك ، لذلك دعونا نضيف مؤشر z: -1 حكم على الجانبين من أجل ضعهم خلف الجزء الأوسط من الشريط.

 .ribbon: before، .ribbon: after background-color: inherit؛ المحتوى: "؛ العرض: كتلة ؛ مرشح: السطوع (.5) ؛ الارتفاع: 100 ٪ ؛ الموضع: مطلق ؛ أعلى: calc (var (- p) / 2) ؛ العرض: var (- p) ؛ z- الفهرس: -1 ؛ 

الآن بعد أن قمنا بمحاذاة الجانبين ، يتم الانتهاء من الشريط CSS لدينا.

يمكنك أدناه الاطلاع على العرض التوضيحي المباشر مرة أخرى ، يرجى ملاحظة أنه يستخدم بعض الأدوات الإضافية أيضًا.