Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Skewed divider between sections */ .section-divider { background: #1a73e8; height: 80px; transform: skewY(-3deg); margin: -40px 0; } /* Diagonal button / label */ .slash-badge { display: inline-block; background: #e53935; color: #fff; padding: 4px 16px; transform: skewX(-12deg); } /* Counter-skew the text to keep it upright */ .slash-badge span { display: inline-block; transform: skewX(12deg); } /* Skewed hero separator */ .hero::after { content: ""; display: block; height: 60px; background: #fff; transform: skewY(2deg); transform-origin: top left; margin-top: -30px; } /* Two-axis skew */ .warp { transform: skew(15deg, 5deg); }
Result
Open