شاید تا حالا از این مدل طرح های توی وبسایت دریبل دیده باشید و براتون سوال شده باشه چطوری میشه این طرح رو پیاده کرد، قطعا با border-radius که نمیشه، پس راه حل چیه؟
برای پیاده سازی این استایل ما میتونیم از سایه ها کمک بگیریم.
خب آماده هستید که کد نویسی رو شروع کنیم؟
یک فایل html به همراه یه فایل css ایجاد میکنیم و کدهای زیر رو هم توی فایل html می نویسیم
خوب دوتا تگ توی کدهای html داریم wrapper همون باکس بزرگه سفیده است و drop همون قطره وسط که اصل کار ما هم با همون تگه.
خوب بعد نوشتن کدهای html میرسیم به مهمترین بخش و نوشتن کدهای css، خوب کدهای زیر رو توی فایل css می نویسیم
این کد رو برای body نوشتم فقط برای نمونه است و هیچ ارتباطی به کد اصلی نداره، فقط برای استایل دادن به صفحه است
این کد ها رو هم برای wrapper در نظر میگیریم، این کدها هم بستگی داره به طرح خودتون.
داریم یواش یواش میرسیم به جاهی خوب داستان
اینم کدهای drop، حتما حواستون باشه position تگ wrapper باید relative باشه و posittion drop absolute
و اینم اصل ماجرا، به کمک شبه کلاس before اومدیم و اون نیم دایره سمت راست drop رو ایجاد کردیم، و با کمک after نیم دایره سمت چپ.
ممنون میشم که توی این نظر سنجی هم شرکت کنید
همچنین می تونید توی این gist هم کدها رو داشته باشید
