Skew

Use the skew utilities to control the transformation that skews an element on the 2D plane.


Class
Properties
skew-y-0
skew-y-1
skew-y-2
skew-y-3
skew-y-6
skew-y-12
skew-x-0
skew-x-1
skew-x-2
skew-x-3
skew-x-6
skew-x-12

Usage

Use the skew utilities to control the transformation that skews an element on the 2D plane.

<div class="d-flex">
    <div class="transform skew-x-6"></div>
    <div class="transform skew-x-12"></div>
    <div class="transform skew-y-6"></div>
    <div class="transform skew-y-12"></div>
</div>

Responsive

Responsive variations also exist for each skew value. Use the .skew-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing skew utility.

<div class="transform skew-x-12 skew-x-md-0 ..."></div>
UI Components

Start building incredible websites and apps with the pre-made components and pages.

Explore ->