چگونگی ایجاد لبه های زاویه دار با استفاده از CSS

داشتن لبه های کمی زاویه دار باعث میشود که وب سایت شما از حالت کسل کننده و یکنواخت بیرون بیاید و کاربران زیادی را جذب خود کند. برای اینکار میتوانید از فناوریهای جدید CSS 3 بهره ببرید و همچنین برای ایجاد این ترفند میتوانید از شبه عناصر ::before و ::after کمک بگیرید.

طریقه استفاده از شبه عناصر در CSS

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

.block{
    height: 400px;
    width: 100%;
    position: relative;
    background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
}
.block::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    z-index: -1;
    bottom: 0;
    transform-origin: left bottom;
    transform: skewY(-3deg);}

برای ایجاد لبه های زاویه دار ابتدا باید مبدا مختصات یعنی نقطه شروع جایی که قرار است تغییر شکل دهد را مشخص کنیم.همانطور که در کدهای بالا میبینید ما مبدا مختصات را با توجه به transform-origin گوشه پایین سمت چپ قرار داده ایم در نتیجه تغییر شکل ما از این نقطه شروع خواهد شد.
اکنون به سراغ قسمت اصلی ماجرا یعنی تغییر شکل میرویم در واقع با استفاده از متد skew() شما میتوانید المان را با دادن درجه بچرخانید میزان چرخش بستگی به پارامترهای عمودی (محور X) وافقی (محور Y) دارد.واحد این متد deg می باشد و چنانچه مقدار آن مثبت باشد عنصر مربوطه به میزان تعیین شده در جهت عقربه های ساعت  و چنانچه منفی باشد در خلاف عقربه های ساعت چرخانده خواهد شد.
در نتیجه با توجه به transform: skewY(-3deg) از آنجایی که مبدا مختصات را پایین سمت چپ قرار دادیم پایین سمت چپ کلاس .block به میزان سه درجه خلاف عقربه های ساعت کاهش پیدا میکند.در زیر برای شما مثالی آورده ایم تا مطلب را بیشتر درک کنید:

روش آسانتر با استفاده از Sass Mixin

روش ساده تر دیگری که برای ایجاد لبه های زاویه دار وجود دارد استفاده از Mixin در Sass است.در واقع با استفاده از Mixin برای ایجاد لبه های زاویه دار تعداد استایلهای کمتری بکار برده میشود در نتیجه مانع گیج شدن و سردرگمی شما میشود. با استفاده از قواعد Mixin شما میتوانید با سرعتی بالا و مشخص هر سمت از عنصر موردنظرتان را که میخواهید منحرف سازید.در زیر به شما این قواعد را نشان خواهیم داد:

@mixin angle-edge($pos-top:null, $angle-top:null, $pos-btm:null, $angle-btm:null){
    width: 100%;
    position: relative;
    background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
    &::before,
    &::after{
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background: inherit;
        z-index: -1;
        transition: ease all .5s;
    }
 
    @if $pos-top{
        &::before{
            @if $pos-top == 'topleft'{
                top: 0;
                transform-origin: right top;
                transform: skewY($angle-top);
            }
            @if $pos-top == 'topright' {
                top: 0;
                transform-origin: left top;
                transform: skewY(-$angle-top);
            }
        }
    }
 
    @if $pos-btm{
        &::after{
            @if $pos-btm == 'bottomleft' {
                bottom: 0;
                transform-origin: right bottom;
                transform: skewY(-$angle-btm);
 
            }
 
            @if $pos-btm == 'bottomright' {
                bottom: 0;
                transform-origin: left bottom;
                transform: skewY($angle-btm);
            }
        }
    }
}

همانطور که در بالا میبینید در Mixin چهار متغیر تعریف شده که همانطور از اسم آنها مشخص است دو متغیر آن جهت ها و دو متغیر دیگر میزان درجه را مشخص میکنند.در نتیجه اگر به متغیرها مقدار بدهیم هر دو سمت بالا و پایین تغییر شکل خواهند داد.

حال که متغیرها را تعریف کردیم به سراغ استفاده از آنها میرویم.نحوه استفاده از متغیرها در Sass بکار بردن @include قبل از آنها است در زیر برای شما مثالی آورده ایم تا مطلب را بیشتر درک کنید:

.block{
    @include angle-edge(topleft, 3deg);
}

کد بالا به این صورت عمل میکند که گوشه بالا سمت چپ کلاس .block را سه درجه در جهت عقربه های ساعت افزایش میدهد.

همچنین برای تغییر شکل پایین سمت چپ عنصر مورد نظر از کد زیر استفاده میشود:

.block{
    @include angle-edge(bottomright, 3deg);
}

و در نهایت اگر بخواهید بر روی دو قسمت از شکل همزمان تغییر شکل ایجاد کنید باید بصورت زیر عمل کنید :

.block{
    @include angle-edge(topleft, 3deg, bottomright, 3deg);
}

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

در زیر نسخه نمایشی  آنچه که در بالا برای شما توضیح دادیم را به شما نشان خواهیم داد با انتخاب هر گزینه تغییر شکل مربوط را خواهید دید: