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 -PassThruYou can also clone this repository and import the module locally:
git clone https://github.com/PowerShellWeb/Shape
cd ./Shape
Import-Module ./ -PassThruShape tries to have simple syntax.
After importing, we can create any CSS shape with simple syntax
circle 50%
ellipse 4rem 50% at right centerTo 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.htmlHere'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.htmlYou can use the shape module to generate any CSS shape.
Have Fun!