صورت پیشامد جدید

فرض کنید بخواهیم یک عنصر, مثلا یک دکمه را به شکل متوازی الاضلاع بسازیم. شاید بگویید خیلی راحت از تابع skew بهره بری و استفاده می کنیم:

.button 
transform: skewX(45deg);

ولی باید توجه داشت در صورتی که نگاهی به پس نتیجه آن می شود که داشته باشیم متوجه می شویم که همچنین و علاوه بر نگهدارنده, محتوا هم کج می می شود:

آیا راهی جهت ساخت یک متوازی الاضلاع بدون آنکه محتوا کج و همچنین ناخوانا می شود وجود دارد؟

پیش نیازها

بهره بری و استفاده از یک عنصر داخلی

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

<button class="button">
<div>Click me</div>
</button>

.button  transform: skewX(45deg); 
.button > div  transform: skewX(-45deg); 

پس نتیجه آن می شود که بصورت زیر خواهد بود:

در صورتی که آن کار را بر روی عنصری که از نوع inline هست انجام دهیم پس نتیجه آن می شود که مورد نظر را نخواهیم گرفت مگر اینگه آن هم را تغییر پیدا کردن به نوع block و همچنین یا inline-block کنیم که آن کار توسط ویژگی display انجام می گیرد.

See the Pen Parallelograms by Mojtaba Seyedi (@seyedi) on CodePen.

آن روش ما را مجبور می کند تا از یک عنصر اضافه بهره بری و استفاده کنیم. ولی باید توجه داشت خوشبخانه یک روش کامل CSSی هم وجود دارد:

بهره بری و استفاده از یک شبه عنصر

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

نقطه دیگر آنکه: زیرا و به درستی که می خواهیم شبه عنصر انعطاف پذیر باشد و همچنین هر زمان که عنصر اصلی کوچک و همچنین یا پهناور و بزرگ شد شبه عنصر هم مقدار و اندازه آن هم را به ارث ببرد, کافی می باشد از position: absolute جهت شبه عنصر بهره بری و استفاده کنیم و همچنین مختصات آن هم را برابر با صفر قرار دهیم تا کاملا گوشه هایش با گوشه های عنصر اصلی مطابق می شود. همینطور زیرا و به درستی که می خواهیم شبه عنصر نسبت به عنصر اصلی مختصات بگیرد از position: relative جهت عنصر اصلی نیز بهره بری و استفاده می گیریم.

همچنین جهت آنکه شبه عنصر بصورت پیش فرض روی عنصر اصلی قرار می گیرد, مجبور هستیم تا به آن هم z-index: -1 بدهیم تا زیر عنصر نگهدارنده اش قرار بگیرد. و همچنین در آخر هم شبه عنصر را به مقدار و اندازه مناسبی کج می کنیم:

.button 
position: relative;
display: inline-block;
padding: .5em 1em;
border: 0;  
background: transparent;
color: white;


.button::before 
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);

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

See the Pen Parallelograms — with pseudoelements by Mojtaba Seyedi (@seyedi) on CodePen.

منبع