ساخت اشکال مختلف با css

ساخت اشکال مختلف با css

با css قادر هستید که تمام اشکال مختلف هندسی را تولید کنید ساخت اشکال مختلف با css به راحتی آب خوردن است. همانطور که میدانید برای ساخت مربع و مستطیل چیز زیادی جز عرض و ارتفاع نیاز نداریم زیرا آنها اشکال طبیعی وب هستند و کافی است که برای ساخت مستطیل فقط عرض و ارتفاع را اضافه کنید اگر بخواهیم مستطیل یا مربع را تبدیل به دایره و بیضی کنیم کافی است برای آن ها border-radius تعیین کنیم.

در این مطلب قرار است که از المان های before:: و after:: استفاده کنیم و با استفاده از این المانهها دو یا چند شکل دیگر را به هم ربط دهیم و یک شکل پیچیده تری ایجاد کنیم .

کد ساخت مربع :

See the Pen jevabZ by farzanenaghshbandy (@farzanenaghshbandy) on CodePen

کد ساخت مستطیل :

See the Pen gBdXWm by farzanenaghshbandy (@farzanenaghshbandy) on CodePen

کد ساخت دایره :

See the Pen yRxPXR by farzanenaghshbandy (@farzanenaghshbandy) on CodePen

کد ساخت بیضی:

See the Pen oaPoGj by farzanenaghshbandy (@farzanenaghshbandy) on CodePen

کد مثلث رو به بالا:

See the Pen rqZYJg by irprogram.com (@irprogramcom) on CodePen

فلش:

See the Pen OBoOBz by irprogram.com (@irprogramcom) on CodePen

کد ذوزنقه:

See the Pen oaPoVY by irprogram.com (@irprogramcom) on CodePen

کد متوازی الاضلاع:

See the Pen pxOdBY by irprogram.com (@irprogramcom) on CodePen

کد ستاره پنج پر :

See the Pen zmJjYG by irprogram.com (@irprogramcom) on CodePen

کد ستاره شش پر :

See the Pen ZqMobz by irprogram.com (@irprogramcom) on CodePen

کد پنج ضلعی:

See the Pen PydeZa by irprogram.com (@irprogramcom) on CodePen

کد شش ضلعی:

See the Pen xyajER by irprogram.com (@irprogramcom) on CodePen

کد قلب :

See the Pen VEGxWr by irprogram.com (@irprogramcom) on CodePen

کد ساخت شکل بینهایت :

See the Pen KGxRbp by irprogram.com (@irprogramcom) on CodePen

کد لوزی :

See the Pen WagJBb by irprogram.com (@irprogramcom) on CodePen

کد شکل الماس :

See the Pen zmJaOd by irprogram.com (@irprogramcom) on CodePen

کد لوزی سر بریده :

See the Pen ReYJrd by irprogram.com (@irprogramcom) on CodePen

کد تخم مرغ :

See the Pen ReYJrd by irprogram.com (@irprogramcom) on CodePen

کد شکل پکمن:

See the Pen ReYJKO by irprogram.com (@irprogramcom) on CodePen

کد حباب گفتگو – talk bubble :

See the Pen qJMKJg by irprogram.com (@irprogramcom) on CodePen

کد point burst:

See the Pen ReYBKR by irprogram.com (@irprogramcom) on CodePen

در قسمت های بعدی ساخت اشکال پیچیده تری را با هم بررسی میکنیم …

بیشتر بخوانید :   php چیست ؟

ترجمه شده از سایت : https://css-tricks.com

۲ پاسخ

منتظریم ببینیم نظر شما چیه ؟

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *