Shape - CSS Component ​

...

Browser support ​

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.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/Shape.css" />
Code
html
<div z-shape="3"></div>
<div z-shape="4"></div>
<div z-shape="5"></div>