يمكنك رؤية المربع مع الأسهم كما هو موضح في الصورة أعلاه. يمكن تحقيق هذا السهم من خلال صور الخلفية أو CSS. تقدم هذه المقالة ثلاثة مربعات موجهة مع الأسهم من خلال CSS.
1. تمرير سمة الحدود
الفكرة: اثنين من المثلثات ، والمثلثان يختلفان عن 1 بكسل كحدود عن طريق تحديد المواقع.
2.CSS3 تحويل
الفكرة: أولاً قم بعمل مربع بنفس اللون على جانبين ، ثم قم بتدويره إلى زاوية معينة لجعله مثلثًا.
3. الشخصيات الخاصة '♦'
الفكر: تم تسريب النصف الأول من الشخصيات الخاصة ، ويبدو مثل المثلثات
1. تمرير سمة الحدود:
دعنا أولاً نجعل div مع كل من عرض وارتفاع 10 بكسل ، والحدود هي أيضا 10 بكسل.
العرض: 10px ؛ الارتفاع: 10 بكسل ؛ الحدود: 10 بكسل صلبة. اللون الحدودي: اللون الأزرق الصفراء باللون الأحمر الأخضر ؛
كما هو مبين في الشكل أدناه:
الفراغ في منتصف الصورة هو العرض والارتفاع الذي وضعناه. إذا تم تعيينه على 0 بكسل ، فماذا سيحدث؟ ، كما هو موضح أدناه:
في هذا الوقت ، يمكننا ضبط ألوان الحدود اليسرى والسفلية لتكون شفافة أو بنفس لون لون الخلفية ، وسيظهر المثلث الذي نريده. كما هو مبين في الشكل أدناه:
الآن دعونا نحقق التأثير على الصورة الأولى:
CSS:
.info {margin-top: 50px ؛ الموقف: قريب العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ ارتفاع الخط: 60 بكسل ؛ الخلفية:#f6f1b3 ؛ box-shadow: 1px 2px 3px #e9d985 ؛ الحدود: 1 بكسل Solid #dace7c ؛ الحدود الحدودية: 4px ؛ محاذاة النص: المركز ؛ اللون: أحمر. . اليسار: 30 بكسل ؛ الفائض: مخفي. العرض: 0 ؛ الارتفاع: 0 ؛ عرض الحدود: 10 بكسل ؛ على غرار الحدود: متقطعة متقطعة صلبة. } .nav-border {top: -20px ؛ اللون الحدودي: شفافة شفافة #DACE7C شفافة ؛ } .nav-background {top: -19px ؛ اللون الحدودي: شفافة شفافة #F6F1B3 شفافة ؛ }HTML:
<viv> <span> رسالة موجه </span> <viv> </viv> <viv> </viv> </viv>
2. تحويل CSS3
نقوم أولاً بصنع مربع Div مع حدود مجاورة مع نفس اللون والحدود الأخرى مع 0 بكسل. كما هو موضح في الصورة:
قم بتدوير الصندوق بمقدار 45 درجة لتحقيق تأثير موجه المثلث.
CSS:
.info {margin-top: 50px ؛ الموقف: قريب العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ ارتفاع الخط: 60 بكسل ؛ الخلفية:#f6f1b3 ؛ box-shadow: 1px 2px 3px #e9d985 ؛ الحدود: 1 بكسل Solid #dace7c ؛ الحدود الحدودية: 4px ؛ محاذاة النص: المركز ؛ اللون: أحمر. . أعلى: -8px ؛ اليسار: 30 بكسل ؛ الفائض: مخفي. العرض: 13px ؛ الارتفاع: 13px ؛ الخلفية:#f6f1b3 ؛ الحدود اليسرى: 1 بكسل Solid #dace7c ؛ أعلى الحدود: 1 بكسل Solid #dace7c ؛ -webkit-transform: تدوير (45deg) ؛ -moz-transform: rotate (45deg) ؛ -O التحول: تدوير (45deg) ؛ التحويل: تدوير (45deg) ؛ }HTML:
<viv> <span> رسالة موجه </span> <viv> </viv> </viv>
3. الشخصيات الخاصة '♦'
"♦" هي شخصية خاصة ، والتي تعادل شخصية ، وبالتالي يتم تعيين الحجم من خلال حجم الخط لتحقيق تأثير الصورة الأولى:
CSS:
.info {margin-top: 50px ؛ الموقف: قريب العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ ارتفاع الخط: 60 بكسل ؛ الخلفية:#f6f1b3 ؛ box-shadow: 1px 2px 3px #e9d985 ؛ الحدود: 1 بكسل Solid #dace7c ؛ الحدود الحدودية: 4px ؛ محاذاة النص: المركز ؛ اللون: أحمر. . اليسار: 30 بكسل ؛ الفائض: مخفي. العرض: 24 بكسل ؛ الارتفاع: 24 بكسل ؛ Font: Normal 24px "Microsoft Yahei" ؛ } .nav-border {top: -17px ؛ اللون:#dace7c ؛ } .nav-background {top: -16px ؛ اللون:#f6f1b3 ؛ }HTML:
<viv> <span> رسالة موجه </span> <viv> ♦ </viv> <viv> ♦ </viv> </viv>
فيما يلي عرض تجريبي متوافق مع IE5.5+، Chrome ، Firfox وغيرها من المتصفحات. إذا كنت تستخدمه ، يمكنك إجراء الاختبار مباشرة إلى مشروعك.
<! doctype html> <html> <head> <title> </title> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"> <style> div.container {position: absolute ؛ أعلى: 30 بكسل ؛ اليسار: 40 بكسل ؛ حجم الخط: 9pt ؛ العرض: كتلة ؛ الارتفاع: 100px ؛ العرض: 200 بكسل ؛ لون الخلفية: شفاف. *الحدود: 1 بكسل Solid #666 ؛ } s {الموضع: absolute ؛ أعلى: -20px ؛ *أعلى: -22px ؛ اليسار: 20 بكسل ؛ العرض: كتلة ؛ الارتفاع: 0 ؛ العرض: 0 ؛ حجم الخط: 0 ؛ Line-Leight: 0 ؛ اللون الحدودي: شفافة شفافة #666 شفافة ؛ على غرار الحدود: متقطع متقطعة صلبة متقطعة. عرض الحدود: 10 بكسل ؛ } i {position: absolute ؛ أعلى: -9px ؛ *أعلى: -9px ؛ اليسار: -10px ؛ العرض: كتلة ؛ الارتفاع: 0 ؛ العرض: 0 ؛ حجم الخط: 0 ؛ Line-Leight: 0 ؛ اللون الحدودي: شفافة شفافة #FFF شفافة ؛ على غرار الحدود: متقطع متقطعة صلبة متقطعة. عرض الحدود: 10 بكسل ؛ } .Content {Border: 1px Solid #666 ؛ -moz-border-Radius: 3px ؛ -webkit-border-radius: 3px ؛ الموقف: مطلق ؛ خلفية اللون: #fff ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ الحشو: 5 بكسل ؛ *أعلى: -2px ؛ *الحدود: 1 بكسل الصلبة #666 ؛ *الحدود: 1 بكسل الصلبة #666 ؛ *أعلى الحدود: 1 بكسل الصلبة *اليسار الحدودي: لا شيء ؛ *اليمين الحدودي: لا شيء ؛ *الارتفاع: 102px ؛ Box-Shadow: 3px 3px 4px ؛ -Moz-box-shadow: 3px 3px 4px ؛ -webkit-box-shadow: 3px 3px 4px ؛ / * لـ IE 5.5 - 7 */ filter: progid: dimizageTransform.microsoft.shadow (قوة = 4 ، الاتجاه = 135 ، color = '#999999') ؛ / * لـ IE 8 */ -MS -FILTER: "progid: dimizageTransform.microsoft.shadow (القوة = 4 ، الاتجاه = 135 ، color = '#999999')" ؛ } </style> </head> <body> <viv> <viv> <viv> Hello World! </viv> <s> <i> </i> </s> </viv> </body> </html>صورة التكاثر:
ملخص:
مربع المطالبة مع الأسهم يجلب نتائج جيدة لتفاعل المستخدم. هذه المقالة تقدم ثلاث طرق. إذا كان لديك طرق أخرى لـ @me ، فسأكون ممتنًا جدًا. أتمنى أن يساعدك هذا المقال.