{"id":3329,"date":"2025-02-27T19:09:07","date_gmt":"2025-02-27T13:09:07","guid":{"rendered":"https:\/\/skyaddons.com\/elementor\/elementor-custom-clip-path-extensions\/"},"modified":"2026-08-11T06:05:50","modified_gmt":"2026-08-11T00:05:50","slug":"custom-clip-path-extensions","status":"publish","type":"page","link":"https:\/\/skyaddons.com\/elementor\/custom-clip-path-extensions\/","title":{"rendered":"Custom Clip-Path Extension"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
CLIP<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

A rectangle is a choice, not a rule.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Twenty-six ready shapes, a hover shape, and a text box for any clip-path<\/code> you can write. Hover the three below \u2014 each one morphs to a second shape over its own transition.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
hexagon \u2192 circle<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
0.7s \u00b7 ease-in-out<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
star \u2192 decagon<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
0.9s \u00b7 ease-in-out<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
bevel \u2192 rhombus<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
0.5s \u00b7 ease-in-out<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
The polygon shelf<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

Three sides up to ten, already written.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The preset list holds the whole regular-polygon run. Pick one from the dropdown and the declaration is emitted for you \u2014 no coordinate is ever typed.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
triangle<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
3 sides<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
rhombus<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
4 sides<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
pentagon<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
5 sides<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
hexagon<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
6 sides<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
heptagon<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
7 sides<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
octagon<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
8 sides<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
nonagon<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
9 sides<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
decagon<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
10 sides<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
The shapes that are not polygons<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

Circles, insets and the odd ones.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

circle()<\/code>, ellipse()<\/code> and inset()<\/code> are separate CSS functions, not polygon approximations \u2014 which is why a circle stays perfectly round at any aspect ratio while a 10-sided polygon does not.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
circle<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
circle()<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
ellipse<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
ellipse()<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
inset<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
inset()<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
star<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
10-point polygon<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
cross<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
12-point polygon<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
frame<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
notched frame<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
message<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
speech bubble<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
bevel<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
cut corners<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Twenty-six presets in total \u2014 the eight above, the eight polygons before them, plus trapezoid, parallelogram, arrows, chevrons and the close cross<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Custom mode<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

Or write the path yourself.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Choose Custom instead of a ready shape and the dropdown turns into a text box that accepts any valid declaration — including shapes no list will ever carry. Both images to the right are written by hand, and each one morphs to a second hand-written shape on hover.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

normal<\/strong>
clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%);

hover<\/strong>
clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 88%);<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
skewed crop<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
hover flips the lean<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
inset with round<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
a preset cannot express this<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Hand-written mode takes any clip-path declaration you like, including inset(\u2026 round \u2026)<\/code> \u2014 a shape the preset list has no entry for.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

<\/div>\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Transition \u2014 the same morph, three speeds<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

Duration is what makes it feel deliberate.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

All three go octagon \u2192 circle on hover. Only the timing differs: a snap, a considered ease, and a slow linear crawl that shows the geometry interpolating point by point.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
0.2s \u00b7 ease<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
a snap<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
0.9s \u00b7 ease-in-out<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
the usable default<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t
2.4s \u00b7 linear<\/div>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
watch the points move<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

CLIP A rectangle is a choice, not a rule. Twenty-six ready shapes, a hover shape, and a text box for any clip-path you can write. Hover the three below \u2014 each one morphs to a second shape over its own transition. hexagon \u2192 circle 0.7s \u00b7 ease-in-out star \u2192 decagon 0.9s \u00b7 ease-in-out bevel \u2192 […]<\/p>\n","protected":false},"author":1,"featured_media":3335,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"sky_video_link_meta":"","footnotes":""},"class_list":["post-3329","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/skyaddons.com\/elementor\/wp-json\/wp\/v2\/pages\/3329","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skyaddons.com\/elementor\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/skyaddons.com\/elementor\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/skyaddons.com\/elementor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skyaddons.com\/elementor\/wp-json\/wp\/v2\/comments?post=3329"}],"version-history":[{"count":0,"href":"https:\/\/skyaddons.com\/elementor\/wp-json\/wp\/v2\/pages\/3329\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/skyaddons.com\/elementor\/wp-json\/wp\/v2\/media\/3335"}],"wp:attachment":[{"href":"https:\/\/skyaddons.com\/elementor\/wp-json\/wp\/v2\/media?parent=3329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}