Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>My Example</title> <style> .shape-box { width: 300px; height: 200px; background: linear-gradient(to right, #ff416c, #ff4b2b); /* M = Move to (start point) Q = Quadratic Bezier Curve T = Smooth Quadratic Bezier Curve L = Line to Z = Close path */ clip-path: path("M 0 100 Q 75 0 150 100 T 300 100 L 300 215 L 0 215 Z"); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 20px; color: white; font-family: sans-serif; font-size: 1.2em; font-weight: bold; } </style> <div class="shape-box"> Clipped with path() </div>