clips.css

[argyleink]

handy named clip-paths, good start here

https://github.com/argyleink/transition.css/blob/main/src/circles/_vars.css
https://css-tricks.com/create-a-responsive-css-motion-path-sure-we-can/
https://simplecss.eu/clip-path.html#
https://tympanus.net/codrops-playground/SaraSoueidan/Pv7zhGno/editorhttps://bennettfeely.com/clippy/

[Afif13]

Here some ideas for tooltips:

* {
  --size-arrow:10px;
  --tooltip-arrow-bottom:polygon(0 0,100% 0,100% calc(100% - var(--size-arrow)),calc(50% + var(--size-arrow)) calc(100% - var(--size-arrow)),50% 100%,calc(50% - var(--size-arrow)) calc(100% - var(--size-arrow)),0 calc(100% - var(--size-arrow)));
  --tooltip-arrow-top:polygon(0 var(--size-arrow),calc(50% - var(--size-arrow)) var(--size-arrow),50% 0,calc(50% + var(--size-arrow)) var(--size-arrow),100% var(--size-arrow),100% 100%,0 100%);
  --tooltip-arrow-left:polygon(var(--size-arrow) 0,100% 0,100% 100%,var(--size-arrow) 100%,var(--size-arrow) calc(50% + var(--size-arrow)),0 50%,var(--size-arrow) calc(50% - var(--size-arrow)));
  --tooltip-arrow-right:polygon(0 0,calc(100% - var(--size-arrow)) 0,calc(100% - var(--size-arrow)) calc(50% - var(--size-arrow)),100% 50%,calc(100% - var(--size-arrow)) calc(50% + var(--size-arrow)), calc(100% - var(--size-arrow)) 100%,0 100%);
}

4 Types of clipping based on the arrow position + one variable to control the arrow size (feel free to update the naming as I am not good at it)

Demo: https://codepen.io/t_afif/pen/PoJqXKX

[argyleink]

sooooo rad!

[Afif13]

An idea for a breadcrumb system:

* {
  --breadcrumb-size:10px;
  --breadcrumb-start:polygon(0 0,calc(100% - var(--breadcrumb-size)) 0,100% 50%,calc(100% - var(--breadcrumb-size)) 100%,0 100%);
  --breadcrumb-step:polygon(0 0,calc(100% - var(--breadcrumb-size)) 0,100% 50%,calc(100% - var(--breadcrumb-size)) 100%,0 100%,var(--breadcrumb-size) 50%);
  --breadcrumb-end:polygon(0 0,100% 0,100% 100%,0 100%,var(--breadcrumb-size) 50%);
}

We have the shape for the first,middle and last element + a variable to control the size of the arrow

Demo: https://codepen.io/t_afif/pen/wvraRYV

[argyleink]

love it

[Afif13]

Some slanted shapes

* {
  --slant-size:10px;
  --slant-top-1:polygon(0 var(--slant-size),100% 0,100% 100%,0 100%);
  --slant-top-2:polygon(0 0,100% var(--slant-size),100% 100%,0 100%);
  --slant-left-1:polygon(var(--slant-size) 0,100% 0,100% 100%,0 100%);
  --slant-left-2:polygon(0 0,100% 0,100% 100%,var(--slant-size) 100%);
  --slant-right-1:polygon(0 0,100% 0,calc(100% - var(--slant-size)) 100%,0 100%);
  --slant-right-2:polygon(0 0,calc(100% - var(--slant-size)) 0,100% 100%,0 100%);
  --slant-bottom-1:polygon(0 0,100% 0,100% calc(100% - var(--slant-size)),0 100%);
  --slant-bottom-2:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--slant-size)));
  --slant-horizontal-1:polygon(var(--slant-size) 0,100% 0,calc(100% - var(--slant-size)) 100% ,0 100%);
  --slant-horizontal-2:polygon(0 0,calc(100% - var(--slant-size)) 0,100% 100%,var(--slant-size) 100%);
  --slant-vertical-1:polygon(0 var(--slant-size),100% 0,100% calc(100% - var(--slant-size)),0 100%);
  --slant-vertical-2:polygon(0 0,100% var(--slant-size),100% 100%,0 calc(100% - var(--slant-size)));
}

I made a variable for each case + a variable to control the "slant". Here also we need better naming I guess.

Demo: https://codepen.io/t_afif/pen/gOGpZNJ

[argyleink]

nice!

[Afif13]

Adding my new generator for section divider: https://css-generators.com/section-divider/ (related article: https://www.freecodecamp.org/news/section-divider-using-css/)

I think they fit perfectly here since I generate one value per clip-path

[Afif13]

Adding another Generator here for some clip-path values to create a Starburst shape: https://css-generators.com/starburst-shape/

[argyleink]

good call, there's def a few sets in there to make css files out of ty!

[Afif13]

Adding another Generator for polygon shapes: https://css-generators.com/polygon-shape/ The outline versions could be interesting, their code is lengthy and not easy to handle so it's good for a Custom Property

[argyleink]

more shapes
https://codepen.io/danwilson/pen/XWPOJMY
https://codepen.io/danwilson/pen/qBMvveV

[argyleink]

https://css-shape.com has a bunch of snippets that would do well as props too