Shape - CSS Component ​

Playground ​

Customization ​

Construction ​

The CSS component uses a <div> tag. Using the z-shape HTML custom attribute will render the shape CSS component.

z-shape ​

The z-shape parameter is the main parameter used to render the shape component. Check the shape list here.

Possible values are: 1, 2, 3, 4, 5 or 6.

The z-shape has one more optional modifier used to flip vertically the shape. The flip modifier can be applied in order after the shape number, using the colon (:) as a separator.

You can customize the size of the shape using the --z-shape--size CSS custom property.

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​