صناعة عدة أشكال هندسية مختلفة بواسطة CSS

29 أغسطس 2015

من أهم مميزات ‏CSS3‎‏ أنها تقلل من استخدام الصور في تصاميم الويب، وتسمح لك بإنشاء أشكال مختلفة ‏بواسطتها. فالأشكال الشائعة التي تراها عادة في ‏فوتوشوب أو ‏Illustrator‏ يمكنك عملها الآن بكل ‏سهولة مستخدمًا ‏CSS3‎‏. تقوم الخصائص الجديدة مثل ‏transform‏ و ‏border-radius‏ بإضافة تشكيلات ‏جديدة إلى الأشكال الأساسية بدلاً من رسمها وتصميمها على برامج الرسم والتصميم. ‏

في درسنا لهذا اليوم، دعنا ننشئ قائمة بالأشكال الأكثر شيوعًا، وذلك باستخدام ‏CSS3‎‏.‏

يمكنك تحميل الملفات المصدرية لهذا الدرس من هنا.

الدائرة

HTML‎

لإنشاء دائرة في الـCSS، نحتاج أولاً إلى ‏div‏ واسمٍ للشكل ‏id‏. وهنا ستأخذ الدائرة هذا الإسم:

‎<div id="circle"></div>‎

CSS‎

ضع مقاسات العرض والارتفاع ‏width‏ و ‏height‏ بالـ‏CSS‏ واجعل قيمة ‏border-radius‏ ‏نصف قيمة العرض والارتفاع:

‏#‏circle‏ } ‏ ‏
    width: 120px‏;‏ 
    height: 120px;‏
   ‏ ‏background: #7fee1d;‏ ‏ 
    -moz-border-radius: 60px‏;‏ 
    webkit-border-radius: 60px‏;‏‏ 
    border-radius: 60px‏;‏‏
}

المربع

‏

HTML‎

نحتاج إلى ‏div‏ مع وضع اسمٍ له، لإنشاء شكل مربع وربطه بالاسم:

‎<div id="square"></div>

‎CSS‎

اضبط مقاسات العرض والارتفاع بنفس القيمة، حتى يبدو واضحًا:

#‏square‏ } ‏ ‏
    width: 120px‏;‏‏ 
    height: 120px‏;‏
    background: #f447ff‏;‏‏
}

المستطيل

HTML

أنشئ ‏div‏ وضع اسمًا له، ويفضل أن يكون الاسم نفس نوع الشكل:

‎<div id="rectangle"></div>‎

‎CSS‎

نضبط العرض والارتفاع تمامًا مثل المربع؛ ولكن بزيادة قيمة العرض أكثر من الارتفاع:

‏#‏rectangle‏ } ‏ ‏
    width: 220px‏;‏
    height: 120px‏;‏
    background: #4da1f7‎‏;‏‏
}

الشكل البيضاوي

HTML

لنقم بإنشاء ‏div‏ ونعطه اسم ‏oval‏:

‎<div id="oval"></div>‎

CSS‎

يشابه الشكلُ البيضاوي الدائرةَ إلى حد كبير؛ ومع ذلك، فإن الشكل البيضاوي هو مستطيل زواياه مستديرة بقيمة ‏نصف الارتفاع:

#‏oval‏ } ‏ ‏
    width: 200px‏;‏‏
    height: 100px‏;
    background: #e9337c‏;-‏
    webkit-border-radius: 100px / 50px‏;‏-‏
    moz-border-radius: 100px / 50px‏;‏
    border-radius: 100px / 50px‏;‏‏
}

المثلث

HTML

يحتاج المثلث إلى ‏div‏ باسم ‏triangle‏:‏

‎<div id="triangle"></div>‎

CSS‎

لإنشاء مثلث بواسطة الـ‏CSS‏، نقوم بالتعديل في خاصية ‏border‏. سنقوم بتعديل عرض الـ‏border‏ ‏حتى يعطينا نتائج مغايرة في قياس الزاويا:

#‏triangle‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏‏
    border-bottom: 140px solid #fcf921‎‏;‏‏‏
    border-left: 70px solid transparent‏;‏‏
    border-right: 70px solid transparent‏;‏‏
}

المثلث المقلوب

HTML

قُم بإنشاء ‏div‏ وأعطه اسمًا‏:

‎<div id="triangle_down"></div>‎

CSS‎

نحتاج إلى تعديل خاصية الحدّ السفليّ، لينتُج لدينا مثلث معكوس:

#‏triangle_down‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏‏
    border-top: 140px solid #20a3bf‏;‏‏
    border-left: 70px solid transparent‏;‏
    border-right: 70px solid transparent‏;
}

مثلث متجه إلى اليسار

HTML

يتطلب هذا الشكل وجود ‏div‏ مع اسمٍ للشكل وليكن ‏triangle_left‏‏:

‎<div id="triangle_left"></div>‎

CSS

نقوم بالتعديل في خاصية الحدّ الأيمن، حتى نحصلَ على مُثلث مُتَّجه لليسار:

#‏triangle_left‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏
    border-top: 70px solid transparent‎‏;‏
    border-right: 140px solid #6bbf20‎;‏
   ‏ ‏border-bottom: 70px solid transparent‏;‏
}

مثلث متجه لليمين

HTML

لنقم بإنشاء ‏div‏ ونعطه اسم ‏triangle_right‏:

‎<div id="triangle_right"></div>

‎

CSS

بعد ذلك نقوم بالتعديل على خاصية الحدّ الأيسر، ليصبح عندنا مثلثًا متجهًا إلى اليمين:

#‏triangle_right‏ }
    ‏width: 0‎‏;‏‏
    height: 0‎‏;‏
    border-top: 70px solid transparent‏;‏
    border-left: 140px solid #ff5a00‎‏;‏
    border-bottom: 70px solid transparent‏;‏
}

الشكل المعين (الماسة)‏

HTML

يحتاج المُعين إلى ‏div‏ باسم ‏diamond‏:

‎<div id="diamond"></div>‎

CSS‎

يُمكن عرض المُعيّن بعدة طرق، وذلك باستخدام خاصية ‏transform‏ مع ‏rotate‏. بهذا يصبح لديك مُثلثان ‏متقابلان ومتلاصقان ببعضهما:

#‏diamond‏ } ‏ ‏
    width: 120px‏;‏
    height: 120px‏;
    background: #1eff00‎‏;‏
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); ‏
    webkit-transform-origin: 0 100%‎‏;‏
    moz-transform-origin: 0 100%‎‏;‏ 
    -ms-transform-origin: 0 100%‎‏;‏‏ 
    -o-transform-origin: 0 100%‎‏;‏
    transform-origin: 0 100%‎‏;‏
    margin: 60px 0 10px 310px‏;‏
}

شبه المنحرف

HTML

يتطلب هذا الشكل وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏trapezium‏‏:

‎<div id="trapezium"></div>‎

CSS‎

نقوم الآن بصناعة الشكل المطلوب، حيث نجعل الحدَّ الأيمن والأيسر متساويين مع الاحتفاظ بالحدّ السفليّ مُسَطّحًا:

#‏trapezium‏ } ‏ ‏
    height: 0‎;‏
   ‏ ‏width: 120px‏;‏‏
    border-bottom: 120px solid #ec3504‎‏;‏‏
    border-left: 60px solid transparent‏;‏
    border-right: 60px solid transparent‏;‏
}

متوازي الأضلاع

HTML‎

قُم بإنشاء ‏div‏ وأعطه اسم ‏parallelogram‏‏:

‎<div id="parallelogram"></div>‎

CSS‎

ثم قم بضبط قيمة الانحراف ‏skew‏ لخاصية ‏transform‏ لحرفه بزاوية 30 درجة:

#‏parallelogram‏ } ‏ ‏
    width: 160px‏;‏
    height: 100px‏;‏
    background: #8734f7‎‏;‏ 
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    -o-transform: skew(30deg); 
    transform: skew(30deg); 
}

النجمة

HTML

‎يلزمنا ‏div‏ لإنشاء النجمة مع اسمٍ له وليكن ‏star‏‏:

‎<div id="star"></div>‎

CSS‎

يتطلب إنشاء النجمة بالـ‏CSS‏ تعديلات عجيبة في خصائص الحدود مع استعمال قيمة ‏rotate‏ لخاصية ‏‏‏transform‏، لاحظ ذلك في الكود‏:

#‏star‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏
    margin: 50px 0‎‏;‏
    color: #fc2e5a‏;‏
    position: relative‏;‏‏
    display: block‏;‏
    border-right: 100px solid transparent‏;‏
    border-bottom: 70px solid #fc2e5a‏;‏
    border-left: 100px solid transparent‏;‏ 
    -moz-transform: rotate(35deg); 
    -webkit-transform: rotate(35deg); 
    -ms-transform: rotate(35deg); 
    -o-transform: rotate(35deg); ‏
}
‏#‏star:before‏ { 
    height: 0; 
    width: 0; 
    position: absolute; 
    display: block; 
    top: -45px; 
    left: -65px; 
    border-bottom: 80px solid #fc2e5a; 
    border-left: 30px solid transparent; 
    border-right: 30px solid transparent; 
    content: ''; 
    -webkit-transform: rotate(-35deg); 
    -moz-transform: rotate(-35deg); 
    -ms-transform: rotate(-35deg); 
    -o-transform: rotate(-35deg);
‏}
#‏star:after‏ { 
    content: ''; 
    width: 0; 
    height: 0; 
    position: absolute; 
    display: block; 
    top: 3px; 
    left: -105px; 
    color: #fc2e5a; 
    border-right: 100px solid transparent; 
    border-bottom: 70px solid #fc2e5a; 
    border-left: 100px solid transparent; 
    -webkit-transform: rotate(-70deg); 
    -moz-transform: rotate(-70deg); 
    -ms-transform: rotate(-70deg); 
    -o-transform: rotate(-70deg); ‏
}

النجمة السداسية

HTML

تتطلب النجمة السداسية وجود ‏div‏ مع اسمٍ للشكل، ولنطلق عليه اسم ‏parallelogram‏‏:

‎<div id="parallelogram"></div>‎

CSS

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

#‏star_six_points‏} ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏‏
    display: block;‏
   ‏ ‏position: absolute‏;‏‏
    border-left: 50px solid transparent‏;‏‏
    border-right: 50px solid transparent‏;‏
    border-bottom: 100px solid #de34f7‎‏;‏‏
    margin: 10px auto‏;‏ 
} 
‏#‏star_six_points:after‏ } ‏ ‏
    content: '';‏
   ‏ ‏width: 0‎‏;‏
    height: 0‎‏;‏
    position: absolute‏;‏
    border-left: 50px solid transparent‏;‏‏
    border-right: 50px solid transparent‏;‏‏
    border-top: 100px solid #de34f7‎‏;‏‏
    margin: 30px 0 0 -50px‎‏;‏‏
}

‏

المضلع الخماسي

HTML

‎يتطلب المُضلعُ الخماسي وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏pentagon‏‏:

‎<div id="pentagon"></div>‎

CSS‎

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

#‏pentagon‏ } ‏ ‏
    width: 54px‏;‏
    position: relative‏;‏
    border-width: 50px 18px 0‎‏;‏‏
    border-style: solid‏;‏
    border-color: #277bab transparent‏;‏ 
} 
‏#‏pentagon:before‏ } ‏ ‏
    content: '';‏
   ‏ ‏height: 0‎‏;‏‏
    width: 0‎‏;‏‏
    position: absolute‏;‏‏
    top: -85px‎‏;‏
    left: -18px‎‏;‏‏
    border-width: 0 45px 35px‏;‏
    border-style: solid‏;‏‏
    border-color: transparent transparent #277bab‏;‏‏
}

المضلع السداسي

HTML

‎
يلزمنا ‏div‏ لإنشاء المُضلع السداسي مع اسم له وليكن ‏hexagon‏‏:

‎<div id="hexagon"></div>‎

CSS‎

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

#‏hexagon‏ } ‏ ‏
    width: 100px‏;‏‏
    height: 55px‏;‏
    background: #fc5e5e‏;‏‏
    position: relative‏;‏‏
    margin: 10px auto‎‏;‏‏
} 
‏#‏hexagon:before‏ } ‏ ‏
    content: '';‏
   ‏ ‏width: 0‎‏;‏‏
    height: 0‎‏;‏
    position: absolute‏;‏
    top: -25px‎‏;‏
    left: 0‎‏;‏‏
    border-left: 50px solid transparent‏;‏
    border-right: 50px solid transparent‏;‏‏
    border-bottom: 25px solid #fc5e5e‏;‏‏
}
‏#‏hexagon:after‏ } ‏ ‏
    content: '';‏ ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏
    position: absolute‏;‏‏
    bottom: -25px‎‏;‏
    left: 0‎‏;‏‏
    border-left: 50px solid transparent‏;
    border-right: 50px solid transparent‏;‏‏
    border-top: 25px solid #fc5e5e‏;‏‏
}

المضلع الثماني

octagon

HTML

قُم بإنشاء ‏div‏ وأعطه اسم ‏octagon‏‏:

‎<div id="octagon"></div>‎

CSS‎

يُمكن إنشاء هذا الشكل بطرق مُشابهة للشكل السابق. حيث نقوم بإنشاء شكلين شبه منحرفين ومن ثم نضع مُثلثين على ‏كل جانب منهما. على الرغم من وجود بعض الطرق الأخرى لعمل ذلك؛ إلا أن هذه هي أفضل طريقة لذلك:

#‏octagon‏ } ‏ ‏
    width: 100px‏;‏
    height: 100px‏;‏‏
    background: #ac60ec‏;‏‏
    position: relative‏;‏‏
} 
‏#‏octagon:before‏ } ‏ ‏
    content: '';‏
   ‏ ‏width: 42px‏;‏‏
    height: 0‎‏;‏
    position: absolute‏;‏
    top: 0‎‏;‏‏
    left: 0‎‏;‏
    border-bottom: 29px solid #ac60ec‏;
    border-left: 29px solid #f4f4f4‎‏;‏‏
    border-right: 29px solid #f4f4f4‎‏;‏‏
} ‏
#octagon:after‏ } ‏ ‏
    content: '';‏ ‏ ‏
    width: 42px‏;‏
    height: 0‎‏;‏
    position: absolute‏;‏
    bottom: 0‎‏;‏‏
    left: 0‎‏;‏
    border-top: 29px solid #ac60ec‏;‏
    border-left: 29px solid #f4f4f4‎‏;‏‏
    border-right: 29px solid #f4f4f4‎‏;‏‏
}

شكل القلب

HTML

يتطلب شكل القلب وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏heart‏‏:

‎<div id="heart"></div>

‎CSS‎

يُمكن أن يكون إنشاءُ شكل القلب صعبًا بعض الشيء؛ ولكن نستطيع القيام بذلك عن طريق عمل استدارة للعناصر من ‏زوايا مختلفة وتغيير قيمة خاصية ‏transform-origin‏ حتى نتمكن من تغيير موضع العنصر المُحَدَّد:

‏#‏heart‏ } ‏ ‏
    position: relative‏;‏ ‏
}
‏#heart:before, #heart:after‏ } ‏ ‏
    content: '';‏ ‏ ‏
    width: 70px‏;‏‏
    height: 115px‏;‏
    position: absolute‏;‏
    background: red‏;‏
    left: 70px‏;‏‏
    top: 0‎‏;‏ 
    -webkit-border-radius: 50px 50px 0 0; 
    -moz-border-radius: 50px 50px 0 0; 
    border-radius: 50px 50px 0 0; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -ms-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
‏{‏
#‏heart:after‏ {
   ‏ left: 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%; 
    -moz-transform-origin: 100% 100%; 
    -ms-transform-origin: 100% 100%; 
    -o-transform-origin: 100% 100%; 
    transform-origin: 100% 100%; ‏
}

البيضة

HTML

يلزمنا ‏div‏ لإنشاء شكل البيضة مع اسمٍ له وليكن ‏egg‏‏:

‎<div id="egg"></div>‎

CSS‎

إنَّ شكل البيضة مطابق إلى حدٍّ ما للشكل البيضاوي؛ إلا أن ارتفاعها أكبر بقليل من عرضها. نقوم بضبط خاصية ‏الزوايا المستديرة بشكل دقيق حتى نحصل على مرادنا بالضبط:

#‏egg‏ } ‏ ‏
    width: 136px‏;‏
    height: 190px‏;‏
    background: #ffc000‎‏;‏‏
    display: block‏;‏‏
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px‏;‏‏
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%‎‏;‏‏
} ‏

شكل اللانهائية

HTML

قُم بإنشاء ‏div‏ وأعطه اسم ‏infinity‏‏:

‎<div id="infinity"></div>‎

CSS‎

يمكن الحصول على شكل اللانهائية بالضبط الدقيق لخصائص الحدود وزاويا الدائرة كما بالشكل السابق:

#‏infinity‏ } ‏ ‏
    width: 220px‏;‏
    height: 100px‏;‏
    position: relative‏;‏‏
}
‏#‏infinity:before, #infinity:after‏ } ‏ ‏
    content: '';‏ ‏ ‏
    width: 60px‏;‏
    height: 60px‏;‏‏
    position: absolute‏;‏‏
    top: 0‎‏;‏
    left: 0‎‏;‏ 
    border: 20px solid #06c999; 
    -moz-border-radius: 50px 50px 0; 
    border-radius: 50px 50px 0 50px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
}
‏#‏infinity:after‏ { 
    left: auto; 
    right: 0; 
    -moz-border-radius: 50px 50px 50px 0; 
    border-radius: 50px 50px 50px 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
‏}

بالون التعليقات

HTML

قُم بإنشاء ‏div‏ وأعطه اسم ‏comment_bubble‏‏:

‎<div id="comment_bubble"></div>‎

CSS‎

نقوم بصناعة هذا الشكل بواسطة إنشاء مستطيل ذي زوايا مستديرة، ثم ننشيء مُثلثًا ونضعه على الجانب الأيسر كما ‏بالصورة:

#‏comment_bubble‏ } ‏ ‏
    width: 140px‏;‏
    height: 100px‏;‏
    background: #088cb7‎‏;‏
    position: relative‏;‏ 
    -moz-border-radius: 12px; 
    -webkit-border-radius: 12px; ‏
    ‏border-radius: 12px‏;‏
}
‏#‏comment_bubble:before‏ } ‏ ‏
    content: '';‏
   ‏ ‏width: 0‎‏;‏
    height: 0‎‏;‏
    right: 100%‎‏;‏‏
    top: 38px‏;‏‏
    position: absolute‏;‏‏
    border-top: 13px solid transparent‏;‏‏
    border-right: 26px solid #088cb7‎‏;‏‏
    border-bottom: 13px solid transparent‏;‏
}

شكل باكمان (لعبة آكلة الجبنة)‏

HTML

يتطلب شكل الباكمان وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏pacman‏‏:

‎<div id="pacman"></div>‎

CSS‎

إنشاء شكل الباكمان غير صعب، فكل ما يحتاجه هو نفس خطوات إنشاء الدائرة مع تعديل بسيط في الحدود وخاصية ‏‏‏radius‏ لصنع فتحة على الجانب الأيسر من الدائرة‏:

#‏pacman‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏‏
    border-right: 70px solid transparent‏;‏
    border-top: 70px solid #ffde00‎‏;‏‏
    border-left: 70px solid #ffde00‎‏;‏‏
    border-bottom: 70px solid #ffde00‎‏;‏
    border-top-left-radius: 70px‏;‏‏
    border-top-right-radius: 70px‏;‏‏
    border-bottom-left-radius: 70px‏;‏
    border-bottom-right-radius: 70px‏;‏‏
}

في الختام

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

الآن وقد انتهيت من درس اليوم، أتمنى أن تكون قد استمتعت فيه، وأنا على استعداد لتقبل أي تعليقات أو تساؤلات أو ‏اقتراحات في هذا المجال.‏

ترجمة وبتصرف للمقال: How to Create Different Shapes in CSS.

حقوق الصورة البارزة: Designed by Freepik.