CSS Shapes are pretty amazing!
There are 8 shape types:
- circle
- ellipse
- inset
- path
- polygon
- rect
- shape
- xywh Unfortunately, that also means there are 8 slightly different ways to write a shape.
Polygons work in pairs. Paths must be quoted.
Most others need to be joined with spaces, but shape itself needs to be joined with spaces and commas before keywords.
This module exists in order to make it slightly easier to generate shapes.
You can install the module from the PowerShell Gallery:
Install-Module ShapeAfter it is installed, you can simply import it:
Import-Module Shape -PassThru
You can also clone this repository and import the module locally:
git clone https://github.com/PowerShellWeb/Shape cd ./Shape Import-Module ./ -PassThru
Shape tries to have simple syntax.
After importing, we can create any CSS shape with simple syntax
circle 50% ellipse 4rem 50% at right center
To use a shape in a page, we simply make it into a string.
".circle { width: 100%; height: 100%; clip-path:$(circle 50%) }"Here's a page with nothing but an ellipse.
We need to provide a background color to see the shape.
@( "<html>" "<head><style>" "body { max-width: 100vw; height: 100vh}" ".ellipse { background-color: #4488ff;width: 100%; height:100%; clip-path:$(ellipse 50% 50%); }" "</style></head>" "<body><div class='ellipse'></div></body>" "</html>" ) > ./ellipse.html
Here's a page with nothing but an inset path:
@( "<html>" "<head><style>" "body { max-width: 100vw; height: 100vh}" ".inset { background-color: #4488ff;width: 100%; height:100%; clip-path:$(inset 5%); }" "</style></head>" "<body><div class='inset'></div></body>" "</html>" ) > ./inset.html
You can use the shape module to generate any CSS shape.
Have Fun!