طراحی بوردر رنگین کمانی با css

سلام دوستان عزیز در این پست می خواهیم نحوه طراحی یک بوردر چهار رنگ و انیمیشنی رو بهتون آموزش بدیم امیدوارم که براتون جذاب و مفید باشه

در سند اصلی یک تگ  div با نام کلاس دلخواه ایجاد می کنید. یک صفحه css ایجاد می کنید و به سند اصلی لینک می کنید

در صفحه cssبرای تمامی تگ های موجود در سند ویژگی  box-sizing را برابر border-box در نظر می گیریم تا در ادامه کار المان ها تغییر سایز نداشته باشن. همچنین یک انیمیشن ایجاد می کنیم که در حال چرخش با مقدار 360 درجه است.

در ادامه استایل های مربوط به تگ  div را می نویسیم .

برای تگ div مقدار before در نظر می گیریم و استایل های مورد نیاز را اعمال می کنیم. رنگ بوردی که ما در توصر نهایی میبینیم در واقع از استایل های مربوط به این سلکتور است. المانی که با سلکتور beforeایجاد شده به چهار قسمت با رنگ های مختلف تقسیم می شود و در پایین ترین سطح قرار میگیرید تا زیر عنصر اصلی باشد.همچنین انیمیشنی که بالاتر  نوشتیم را به این سلکتور اعمال می کنیم.

در نهایت استایل های نهایی برای مقدار after را ست می کنیم و خروجی کار را میبینم.