Skew
Also called skewX or skewY
A CSS transform that slants an element along the x or y axis, turning a rectangle into a parallelogram.
export function PlanHeading() {
return (
<div className='flex items-center gap-3'>
<h3 className='text-lg font-semibold'>Team workspaces</h3>
{/* Lean the badge, then lean the label back so the text stays upright. */}
<span className='inline-block -skew-x-12 rounded bg-blue-600 px-2.5 py-1 text-xs font-bold text-white uppercase'>
<span className='inline-block skew-x-12'>New</span>
</span>
<span className='inline-block -skew-x-12 rounded bg-rose-500 px-2.5 py-1 text-xs font-bold text-white'>
<span className='inline-block skew-x-12'>20% off</span>
</span>
</div>
);
}Make the "New" badge a slanted parallelogram: apply transform: skewX(-12deg) to the badge and skewX(12deg) to the label inside so the text stays upright. Give the label display: inline-block so the transform applies, and use 4px by 10px padding with a 4px radius.
Paste into Layerwise or any AI coding tool.
What is Skew?
transform: skewX(-12deg) keeps the top and bottom edges level but leans the sides, so vertical lines tilt. skewY() does the opposite and tilts the horizontal lines. Everything inside slants along with the shape, including text.
Skew adds energy to a layout: slanted badges and sale tags, angled section dividers, sporty buttons, or a card that leans slightly as it slides in to suggest speed.
To slant a background but keep the label upright, skew the outer element and apply the opposite skew to the content inside, or draw the angled shape with clip-path. Keep angles small, around 5 to 20deg, because text gets hard to read beyond that.
Often confused with
- Rotate
- Rotate turns the whole shape and keeps its corners square. Skew leans the sides, so the corners stop being right angles.
Related terms
All termsRotate
A CSS transform that turns an element around its transform origin by an angle, such as `rotate(45deg)`.
Clip-path
A CSS property that cuts an element to a shape, such as a circle, an inset rectangle, or a polygon, and hides everything outside it.
Translate
A CSS transform that moves an element along the x or y axis while the layout around it stays exactly where it was.
Scale
A CSS transform that draws an element larger or smaller around its transform origin, without pushing neighboring elements.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.