جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
ایجاد اشکال مثلثی با css بدون هک های مسخره
ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 2 دقیقه

ایجاد اشکال مثلثی با css بدون هک های مسخره

هر کسی که با css کار میکنه میدونه که اشکال مثلثی شکل رو نمیشه خیلی ساده و راحت ایجاد کرد و برای ایجاد چنین چیزهای احتیاج به روش های مختلف و خسته کننده ایه که بهشون هک css میگن . دوتا از راحل های معمول برای ایجاد چنین اشکالی استفاده از روش Border ها و unicode ها هست .

خوب با استفاده از این دو راحل میشه اشکال مثلثی رو رسم کرد اما هنوز هم روش خیلی جالبی محسوب نمیشه و کد های مارو زشت میکنه و انعطاف پذیری رو هم پایین میاره . برای مثال شما نمیتونید یک شکل مثلثی با css ایجاد کنید و بعد بهش بکگراند image بدید . هر دو راحل بالا فقط توانایی پذیرفتن رنگ ها رو دارند . حالا قصد داریم در این مقاله با روش های اشنا بشیم که ایجاد این اشکال رو خیلی خیلی ساده تر میکنه .

معرفی Clip-path

Clip-path یک قابلیت جالبه که به css اضافه شده و به شما کمک میکنه تا به سادگی بخشی از المنتی که نیاز ندارید رو پنهان کنید و مابقی بخش ها رو به کاربر نمایش بدید . به مثال زیر دقیت کنید . فرض کنید یک div تعریف میکنید و یک طول و عرض و یک تصویر به عنوان بکگراند مشخص میکنید .

div {
    width: 200px;
    height: 200px;
    background: url(https://goo.gl/BeSyyD);
}

حالا همین استایل رو به سادگی با استفاده از تابع polygon تبدیل میکنیم به یک مثلث باحال . به کد زیر دقت کنید . 

div {
    width: 200px;
    height: 200px;
    background: url(https://goo.gl/BeSyyD);

    /* The points are: centered top, left bottom, right bottom */
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

هر چیزی که در داخل محدودی که مشخص کردید باشه نمایش داده میشه و هر چیزی که خارج از محدوده باشه پنهان و با استفاده از این روش نه تنها میتونیم اشکال مثلثی ایجاد کنیم بلکه میتونم اشکال دیگه ای رو هم به سادگی ایجاد کنیم . 

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

پشتیبانی مرورگرها

با باز کردن این صفحه caniuse بصورت کامل پشتیبانی این روش در مرورگرهای مختلف رو میتونید مشاهده کنید . در مرورگر کروم بصورت کامل این روش پشتیبانی میشه و در مرورگر safari احتیاج به استفاده از -webkit- هستش در مرورگر firefox قرار در ورژن ۵۳ این امکان اضافه بشه .

چه امتیازی برای این مقاله میدهید؟

خیلی بد
بد
متوسط
خوب
عالی
1 از 1 رای

/@hesammousavi
حسام موسوی
طراح و برنامه نویس

بیشتر از ۱۵ سال هست که در حال برنامه‌نویسی و انجام پروژه های مختلف هستم و ۱۰ سالی هست که آموزش برنامه‌نویسی به علاقمندان حوزه برنامه نویسی میدیم در همه این مدت الان عاشق کدزنی و چالش‌های پروژه‌های مختلفم. به تدریس علاقه خاصی دارم و دوست دارم دانشی که در این راه بدست آوردم را در اختیار دیگران هم قرار بدم. 

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنید ورود یا ثبت‌نام

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

حسام موسوی

طراح و برنامه نویس

۵ مقاله اخیر

۵ مقاله اخیر از این قسمت برای شما در دسترس است