شرح أشكال CSS: كيفية رسم دائرة ومثلث والمزيد باستخدام Pure CSS

قبل أن نبدأ. إذا كنت تريد المزيد من المحتوى المجاني ولكن بتنسيق الفيديو. لا تفوت فرصة زيارة قناة Youtube الخاصة بي حيث أنشر مقاطع فيديو أسبوعية على ترميز FrontEnd.

//www.YouTube.com/user/Weibenfalk

----------

هل أنت جديد في تطوير الويب و CSS؟ هل تساءلت يومًا كيف تصنع هذه الأشكال الجميلة التي تراها عبر الإنترنت؟ أتساءل لا أكثر. لقد جئت إلى المكان المناسب.

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

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

أشكال CSS - الطريقة الأساسية

باستخدام بعض الحيل في CSS كنا دائما قادرة على خلق الأشكال الأساسية مثل الساحات ، الدوائر ، والمثلثات مع خصائص CSS العادية. دعونا نلقي نظرة على عدد قليل منهم الآن.

المربعات والمستطيلات

ربما تكون المربعات والمستطيلات هي أسهل الأشكال التي يمكن تحقيقها. بشكل افتراضي ، يكون div دائمًا مربعًا أو مستطيلًا.

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

#square { background: lightblue; width: 100px; height: 100px; }

الدوائر

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

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

#circle { background: lightblue; border-radius: 50%; width: 100px; height: 100px; }

مثلثات

المثلثات أصعب قليلاً. علينا تعيين الحدود على العنصر لتتناسب مع المثلث. من خلال ضبط العرض والارتفاع على الصفر على العنصر ، سيكون العرض الفعلي للعنصر هو عرض الحد.

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

#triangle { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid lightblue; }

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

 #triangle { width: 0; height: 0; border-top: 40px solid transparent; border-right: 80px solid lightblue; border-bottom: 40px solid transparent; }

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

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

عيب

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

يوجد أدناه رسم توضيحي يوضح المثلث وكيف سيتدفق النص.

لحسن الحظ ، لدينا بعض خصائص CSS الحديثة لاستخدامها بدلاً من ذلك.

أشكال CSS - بطريقة أخرى

في الوقت الحاضر لدينا خاصية تسمى الشكل الخارجي لاستخدامها في CSS. تتيح لك هذه الخاصية تحديد الشكل الذي سيلتف / يتدفق حوله النص.

إلى جانب هذه الخاصية ، لدينا بعض الأشكال الأساسية:

أقحم()

دائرة()

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

مضلع ()

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

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

يمكنك قراءة المزيد عن السبب هنا. يوجد أدناه أيضًا نص أخذته من الرابط المقدم إلى developer.mozilla.org.

و shape-outsideيتم تحديد الملكية باستخدام القيم من القائمة أدناه، والتي تحدد المنطقة تعويم لعناصر تعويم. تحدد منطقة العائمة الشكل الذي يلتف حوله المحتوى المضمن (العناصر العائمة).

أقحم()

يمكن استخدام النوع inset () لإنشاء مستطيل / مربع بإزاحة اختيارية لالتفاف النص. يتيح لك تقديم قيم حول مدى تداخل نص الالتفاف مع الشكل.

يمكنك تحديد الإزاحة لتكون نفسها لجميع الاتجاهات الأربعة مثل هذا: داخلي (20 بكسل). أو يمكن ضبطه بشكل فردي لكل اتجاه: داخلي (20px 5px 30px 10px) .

يمكنك استخدام وحدات أخرى أيضًا لتعيين الإزاحة ، على سبيل المثال ، النسبة المئوية. تتوافق القيم كما يلي: داخلي (أعلى اليمين أسفل اليسار) .

Check out the below code example. I've specified the inset values to be 20px at the top, 5px to the right, 30px at the bottom and 10px to the left. If you want your text to go around your square instead you can just skip using inset() at all. Instead set the background on your div and specify the size as usual.

 #square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px); background: lightblue; }

It is also possible to give inset() a second value that specifies the border-radius of the inset. Like below:

 #square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px round 50px); background: lightblue; }

circle()

In this one a circle is created using the shape-outside property. You also have to apply a clip-path with the corresponding property for the circle to show up.

The clip-path property can take the same value as the shape-outside property so we can give it the standard circle() shape that we used for shape-outside. Also, note that I've applied a 20px margin on the element here to give the text some space.

#circle { float: left; width: 300px; height: 300px; margin: 20px; shape-outside: circle(); clip-path: circle(); background: lightblue; }

In the above example, I don't specify the radius of the circle. This is because I want it to be as big as the div is (300px). If you want to specify a different size for the circle you can do that.

The circle() takes two values. The first value is the radius and the second value is the position. These values will specify the center of the circle.

In the below example I've set the radius to 50%. Then I have shifted the center of the circle by 30%. Note that the word "at" has to be used between the radius and position values.

I've also specified another position value on the clip-path. This will clip the circle in half as I move the position to zero.

 #circle { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50% at 30%); clip-path: circle(50% at 0%); background: lightblue; }

ellipse()

Ellipses work the same way as circles except that they create an oval. You can define both the X value and the Y value, like this: ellipse(25px  50px).

The same as a circle, it also takes a position value as the last value.

 #ellipse { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: ellipse(20% 50%); clip-path: ellipse(20% 50%); background: lightblue; }

polygon()

A polygon is a shape with different vertices/coordinates defined. Below I create a "T" shape which is the first letter in my name. I start from the coordinates 0,0 and move from left to right to create the "T" shape.

#polygon { float: left; width: 150px; height: 150px; margin: 0 20px; shape-outside: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); clip-path: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); background: lightblue; }

Images

يمكنك أيضًا استخدام الصور ذات الخلفيات الشفافة لإنشاء الشكل الخاص بك. مثل هذا القمر المستدير الجميل أدناه.

هذه صورة بتنسيق .png بخلفية شفافة.

#moon { float: left; width: 150px; height: 150px; shape-outside: url("./src/moon.png"); }

وهذا كل شيء! شكرا لقرائتك.

حول مؤلف هذا المقال

اسمي Thomas Weibenfalk وأنا مطور من السويد. أقوم بانتظام بإنشاء برامج تعليمية مجانية على قناة Youtube الخاصة بي. هناك أيضًا عدد قليل من الدورات التدريبية المتميزة على React و Gatsby. لا تتردد في زيارتي على هذه الروابط:

تويتر -weibenfalk ،

Weibenfalk على يوتيوب ،

موقع دورات Weibenfalk.