| CARVIEW |
Select Language
HTTP/2 200
date: Thu, 31 Jul 2025 09:20:39 GMT
content-type: text/html; charset=utf-8
cache-provider: CLOUDWAYS-CACHE-DE
x-frame-options: SAMEORIGIN
referrer-policy: strict-origin-when-cross-origin
strict-transport-security: max-age=31536000
x-content-type-options: nosniff
x-xss-protection: 1; mode=block
vary: Accept-Encoding
last-modified: Wed, 30 Jul 2025 15:59:39 GMT
cache-control: max-age=0, s-maxage=2592000
expires: Thu, 31 Jul 2025 08:39:03 GMT
age: 2495
x-cache: HIT
cf-cache-status: DYNAMIC
set-cookie: __cf_bm=.kC52YRrB66c4rs2M0uDywFGrWbEuG1q1pFgY.p7ewk-1753953639-1.0.1.1-FwKtUmgljLmyIAMzeVbwvBjVcyUguoGyyzvj8mkp_c9XCSeJVtyI0E3jojm390zfVm.oNg87QrjJcJaeT2LN90WrJkGHEhRZYR2yGw4mj0Q; path=/; expires=Thu, 31-Jul-25 09:50:39 GMT; domain=.css-tricks.com; HttpOnly; Secure; SameSite=None
server: cloudflare
cf-ray: 967c05604eb8e084-BLR
content-encoding: gzip
P | CSS-Tricks
Skip to main content
path()
path()
The CSS path() function enables us to create complex paths, polygons and other shapes using SVG path command syntax.
.element { clip-path: path("…"); }
polygon()
polygon()
The CSS polygon() function allows you to create any type of polygon to use in the shape-outside, clip-path, and offset-path properties.
.element { clip-path: polygon(50% 0%, 75% 6.7%, 93.3% 25%, 100% 50%, 93.3% 75%, 75% 93.3%, 50% 100%, 25% 93.3%, 6.7% 75%, 0% 50%, 6.7% 25%, 25% 6.7%); }