ساخت متوازی الاضلاع

صورت مسئله

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

 

.button {
  transform: skewX(45deg);
}

 

اما اگر نگاهی به نتیجه داشته باشیم متوجه می شویم که علاوه بر نگهدارنده, محتوا هم کج می شود:

 

 

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

پیشنیازها

1. CSS Transform

 

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

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

<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.

 

منبع

• CSS Secrets By Lea Verou