كيفية إنشاء شكل قلب مع المغلق

بعد ذلك ، نجعلها مربعة عن طريق تحديد العرض والارتفاع بالتساوي. اختيار لون الخلفية التي تريدها.

 .شكل قلب موقف: نسبي؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ لون الخلفية: rgba (250،184،66، 0.8)؛  

يصل المقبل ، ونحن سوف تجعل الدوائر.

بدلاً من إضافة عناصر جديدة ، سوف نستفيد من العناصر الزائفة, :قبل و :بعد. وضعنا لأول مرة في :قبل العناصر الزائفة كالدائرة الأولى لدينا. نجعله مربعًا متساويًا في الحجم مع العرض والارتفاع تمامًا كما فعلنا مع div. نقوم بعد ذلك بتحويلها إلى دائرة عن طريق إعطائها نصف قطرها 50٪ ووضعها على الجانب الأيسر من المربع.

 .شكل قلب: قبل الموقف: مطلق ؛ القاع: 0 بكسل ؛ اليسار: -100 بكسل ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ المحتوى: "؛ -wkkit-border-radius: 50٪ ؛ -moz-border-radius: 50٪ ؛ -o-border-radius: 50٪ ؛ الحدود-radius: 50٪ ؛ لون الخلفية: rgba (250،184،66 ، 0.8) ؛ 

جنبا إلى جنب مع الساحة سيكون لدينا نتيجة مثل هذا:

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

 .شكل قلب: بعد الموقف: مطلق ؛ أعلى: -100 بكسل ؛ اليمين: 0 بكسل ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ المحتوى: "؛ -wkkit-border-radius: 50٪ ؛ -moz-border-radius: 50٪ ؛ -o-border-radius: 50٪ ؛ الحدود-radius: 50٪ ؛ لون الخلفية: rgba (250،184،66 ، 0.8) ؛ 

النتائج كما يلي:

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

 .شكل قلب: قبل ، شكل قلب: بعد موقف: مطلق ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ المحتوى: "؛ -wkkit-border-radius: 50٪ ؛ -moz-border-radius: 50٪ ؛ -o-border-radius: 50٪ ؛ الحدود-radius: 50٪ ؛ لون الخلفية: rgba (250،184،66 ، 0.8) ؛ .heart-shape: قبل bottom: 0px ؛ left: -100px؛ .heart-shape: after top: -100px؛ right: 0px؛ 

تا-دا! لدينا شكل قلب ، رغم أنه ليس في الاتجاه الصحيح بعد. لتصويبها ، سنستخدم CSS3 Transformation.

يمكن إعطاء التحول إلى العناصر الرئيسية للشكل ؛ هنا ، وهذا يعني الساحة. عند التحويل ، يقوم العنصر الزائف بتغيير موضعه تلقائيًا باتباع العنصر الرئيسي.

هنا سنقوم بتدوير القلب حتى يظهر “مكانة”.

 .شكل قلب -webkit- تحويل: تدوير (45deg) ؛ -moz-convert: تدوير (45deg) ؛ -ms-convert: تدوير (45deg) ؛ تحويل -o: تدوير (45deg) ؛ تحويل: تدوير (45deg) ؛  

وهذا ما يبدو عليه قلبنا الآن.

النتيجة:

الكود الكامل لشكل القلب أعلاه هو كما يلي ، في HTML:

وعلى CSS لدينا ، سيكون مثل هذا:

 .شكل قلب موقف: نسبي؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ - تحويل صفحات الويب: تدوير (45deg) ؛ -moz-convert: تدوير (45deg) ؛ -ms-convert: تدوير (45deg) ؛ تحويل -o: تدوير (45deg) ؛ تحويل: تدوير (45deg) ؛ لون الخلفية: rgba (250،184،66، 1)؛ . شكل قلب: قبل ، شكل قلب: بعد موضع: مطلق ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ المحتوى: "؛ -wkkit-border-radius: 50٪ ؛ -moz-border-radius: 50٪ ؛ -o-border-radius: 50٪ ؛ الحدود-radius: 50٪ ؛ لون الخلفية: rgba (250،184،66 ، 1) ؛ .heart-shape: قبل bottom: 0px ؛ left: -100px؛ .heart-shape: after top: -100px؛ right: 0px؛ 

لاحظ أننا الآن تعيين قناة ألفا لل rgba (250،184،66 ، 1) في الخلفية ل 1 لإزالة الشفافية. الآن هذا ما يبدو قلبنا.

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

استنتاج

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

أنت مقيد فقط بإبداعك وخيالك!