Clip-Path Shapes
Clip-Path Shapes
Creating a clip-path shape requires just a single element, a specific shape class, and any WebUI classes that might normally be used to style elements, such as width, height, alignment, and background. Clip-path shapes allow an image, SVG, or icon element to be nested inside another clipped element or the clip-path shape classes can be added directly to one of those elements.
<div class="row">
<div class="col">
<div class="rhombus-clip-shape width-md height-md background-accent-1"></div>
</div>
<div class="col">
<div class="rhomboid-clip-shape width-md height-md background-accent-1"></div>
</div>
<div class="col">
<div class="kite-clip-shape width-md height-md background-accent-1"></div>
</div>
<div class="col">
<div class="equilateral-triangle-clip-shape width-md height-md background-accent-1"></div>
</div>
</div>
<div class="row-spacing-md"></div>
<div class="row">
<div class="col">
<div class="trapezoid-isosceles-clip-shape width-md height-md background-accent-1"></div>
</div>
<div class="col">
<div class="triangle-isosceles-clip-shape width-md height-md background-accent-1"></div>
</div>
<div class="col">
<div class="pentagon-clip-shape width-md height-md background-accent-1"></div>
</div>
<div class="col">
<div class="heptagon-clip-shape width-md height-md background-accent-1"></div>
</div>
</div>
<div class="row-spacing-md"></div>
<div class="row">
<div class="col">
<div class="octagon-clip-shape width-md height-md background-accent-1"></div>
</div>
<div class="col">
<div class="star-clip-shape width-md height-md background-accent-1"></div>
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
HTML
Clip-Path Shape Classes
Clip-path classes available in WebUI.
| Class | Description |
|---|---|
| equilateral-triangle-clip-shape | Creates an equilateral triangle shape when applied to an element. |
| heptagon-clip-shape | Creates a heptagon shape when applied to an element. |
| kite-clip-shape | Creates a kite shape when applied to an element. |
| octagon-clip-shape | Creates an octagon shape when applied to an element. |
| pentagon-clip-shape | Creates a pentagon shape when applied to an element. |
| rhomboid-clip-shape | Creates a rhomboid shape when applied to an element. |
| rhombus-clip-shape | Creates a rhombus shape when applied to an element. |
| star-clip-shape | Creates a star shape when applied to an element. |
| trapezoid-isosceles-clip-shape | Creates a trapezoid isosceles shape when applied to an element. |
| triangle-isosceles-clip-shape | Creates a triangle isosceles shape when applied to an element. |
Clipped SVG Shapes
<div class="row">
<div class="col">
<div id="rhombusShape" class="width-md height-md background-accent-4"></div>
</div>
<div class="col">
<div id="rhomboidShape" class="width-md height-md background-accent-4"></div>
</div>
<div class="col">
<div id="kiteShape" class="width-md height-md background-accent-4"></div>
</div>
<div class="col">
<div id="trapezoidIsoscelesShape" class="width-md height-md background-accent-4"></div>
</div>
</div>
<div class="row-spacing-md"></div>
<div class="row">
<div class="col">
<div id="triangleIsoscelesShape" class="width-md height-md background-accent-4"></div>
</div>
<div class="col">
<div id="pentagonShape" class="width-md height-md background-accent-4"></div>
</div>
<div class="col">
<div id="starShape" class="width-md height-md background-accent-4"></div>
</div>
<div class="col">
<div id="customShape" class="width-md height-md background-accent-4"></div>
</div>
</div>
HTML
webui.ready( () => {
ui("#rhombusShape").createRhombusShape();
ui("#rhomboidShape").createRhomboidShape();
ui("#kiteShape").createKiteShape();
ui("#trapezoidIsoscelesShape").createTrapezoidIsoscelesShape();
ui("#triangleIsoscelesShape").createTriangleIsoscelesShape();
ui("#pentagonShape").createPentagonShape();
ui("#starShape").createStarShape();
ui("#customShape").renderPolygonShape("0.2 0.7, 0.5 0, 0.5 0, 1 1");
});
JS
Clipped SVG Functions
The following functions can be used to generate clipped SVG shapes. A clipped SVG element is appended as a child element. See below for the WebUI extension functions available for this purpose. There is also the renderPolygonShape( polygonPoints ) function that can be used to generate the required shape from a set of polygon points.
| Function | Description |
|---|---|
| createRhombusShape() | Appends a clipped SVG rhombus shape to a WebUI element. |
| createRhomboidShape() | Appends a clipped SVG rhomboid shape to a WebUI element. |
| createKiteShape() | Appends a clipped SVG kite shape to a WebUI element. |
| createTrapezoidIsoscelesShape() | Appends a clipped SVG trapezoid isosceles shape to a WebUI element. |
| createTriangleIsoscelesShape() | Appends a clipped SVG triangle isosceles shape to a WebUI element. |
| createPentagonShape() | Appends a clipped SVG pentagon shape to a WebUI element. |
| createStarShape() | Appends a clipped SVG star shape to a WebUI element. |
| renderPolygonShape( polygonPoints ) | Appends a clipped SVG shape to a WebUI element using the specified polygon points array. |
Breadcrumb Shapes
Breadcumbs
Breadcrumb shapes have been developed to be versatile in terms of styling, so can be used with any theme colors. There are 5 standard heights available to match the WebUI control heights, but the widths can be any value within the space available of course. The height of each breadcrumb can be overridden as shown in the first example below, where the height-xss class has been applied. However, there is a limit to how large the breadcrumb separators can be.
<div class="gap-vertical-md">
<div class="breadcrumb width-xl">
<a href="#1" class="breadcrumb-xs height-xxs breadcrumb-line-accent-4 color-hover-muted width-xs-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="place-middle-center">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
</a>
<a href="#2" class="breadcrumb-xs height-xxs breadcrumb-line-accent-4 text-xs color-hover-muted width-one-quarter"><span class="place-middle-center">Link 2</span></a>
<a href="#3" class="breadcrumb-xs height-xxs breadcrumb-line-accent-4 text-xs color-hover-muted width-one-quarter"><span class="place-middle-center">Link 3</span></a>
<a href="#0" class="breadcrumb-xs height-xxs text-xs width-one-quarter" disabled><span class="place-middle-center">Link 4</span></a>
</div>
<div class="breadcrumb">
<a href="#1" class="breadcrumb-xs breadcrumb-line-light dark hover-accent-4 width-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="place-middle-center">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
</a>
<a href="#2" class="breadcrumb-xs breadcrumb-line-light text-xs accent-5-dark hover-accent-4 width-md-lg"><span class="place-middle-center">Link 2</span></a>
<a href="#3" class="breadcrumb-xs breadcrumb-line-light text-xs dark-alternate hover-accent-4 width-md-lg"><span class="place-middle-center">Link 3</span></a>
<a href="#0" class="breadcrumb-xs text-xs dark-highlight cursor-default width-md-lg" disabled><span class="place-middle-center">Link 4</span></a>
</div>
<div class="breadcrumb">
<a href="#1" class="breadcrumb-sm breadcrumb-line-light breadcrumb-rounded accent-1-dark hover-accent-4 width-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="place-middle-center">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
</a>
<a href="#2" class="breadcrumb-sm breadcrumb-line-light breadcrumb-rounded text-xs accent-1 hover-accent-4 width-one-quarter"><span class="place-middle-center">Link 2</span></a>
<a href="#3" class="breadcrumb-sm breadcrumb-line-light breadcrumb-rounded text-xs accent-1-highlight hover-accent-4 width-one-quarter"><span class="place-middle-center">Link 3</span></a>
<a href="#0" class="breadcrumb-sm breadcrumb-last text-xs accent-1-alternate cursor-default width-one-quarter" disabled><span class="place-middle-center">Link 4</span></a>
</div>
<div class="breadcrumb">
<a href="#1" class="breadcrumb-lg breadcrumb-line-accent-4 breadcrumb-rounded rounded-left-md accent-2-dark hover-accent-2-light width-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="place-middle-center">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
</a>
<a href="#2" class="breadcrumb-lg breadcrumb-rounded text-xs accent-2 hover-accent-2-light width-one-quarter"><span class="place-middle-center">Link 2</span></a>
<a href="#3" class="breadcrumb-lg breadcrumb-rounded text-xs accent-2-highlight hover-accent-2-light width-one-quarter"><span class="place-middle-center">Link 3</span></a>
<a href="#0" class="breadcrumb-lg breadcrumb-last rounded-right-md text-xs accent-2-alternate cursor-default width-one-quarter" disabled><span class="place-middle-center">Link 4</span></a>
</div>
<div class="breadcrumb">
<a href="#1" class="breadcrumb-xl rounded-left-md warning-light hover-accent-5-light width-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="place-middle-center">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
</a>
<a href="#2" class="breadcrumb-xl text-xs warning-light hover-accent-5-light width-one-quarter"><span class="place-middle-center">Link 2</span></a>
<a href="#3" class="breadcrumb-xl text-xs warning-light hover-accent-5-light width-one-quarter"><span class="place-middle-center">Link 3</span></a>
<a href="#0" class="breadcrumb-xl breadcrumb-last rounded-right-md text-xs warning-light cursor-default width-one-quarter" disabled><span class="place-middle-center">Link 4</span></a>
</div>
</div>
HTML
Breadcrumb Classes
Classes available for breadcrumbs.
| Class | Description |
|---|---|
| breadcrumb | Defines the outer breadcrumb wrapper. |
| breadcrumb-xs | Used to create a breadcrumb with an extra small height. |
| breadcrumb-sm | Used to create a breadcrumb with a small height. |
| breadcrumb-md | Used to create a breadcrumb with a medium height. |
| breadcrumb-lg | Used to create a breadcrumb with a large height. |
| breadcrumb-xl | Used to create a breadcrumb with an extra large height. |
| breadcrumb-last | Used by the CSS to style the last breadcrumb item. |
| breadcrumb-line-* | Sets the color of the breadcrumb item divider lines. |
| breadcrumb-rounded | Sets the shape of the breadcrumb item ends and divider lines to rounded. |
| breadcrumb-nodivider | Removes the breadcrumb divider line for individual breadcrumb items. |
| breadcrumb-nopointer | Removes the pointed or rounded end from breadcrumb items. |
Pointer Shapes
Pointer Shapes
WebUI includes a collection of pointer classes. Some of these are used in the tooltips component, but are also available for general use.
<div class="row">
<div class="col flex align-items-center justify-content-center">
<div class="pointer-right-md pointer-right-info"></div>
</div>
<div class="col flex align-items-center justify-content-center">
<div class="pointer-bottom-lg pointer-bottom-accent-3"></div>
</div>
<div class="col flex align-items-center justify-content-center">
<div class="pointer-left-sm pointer-left-danger"></div>
</div>
</div>
<div class="row">
<div class="col flex align-items-center justify-content-center">
<div class="pointer-left-lg pointer-left-accent-1"></div>
</div>
<div class="col flex align-items-center justify-content-center">
<div class="pointer-top-md pointer-top-success"></div>
</div>
<div class="col flex align-items-center justify-content-center">
<div class="pointer-right-lg pointer-right-warning"></div>
</div>
</div>
HTML
Pointer Classes
Classes available for pointer shapes.
| Class group | Class names | Description |
|---|---|---|
| pointer-top-* | pointer-top-sm pointer-top-md pointer-top-lg |
Defines a top pointer at a specified size. |
| pointer-top-* | pointer-top-default pointer-top-light pointer-top-dark pointer-top-accent-1 pointer-top-accent-2 pointer-top-accent-3 pointer-top-accent-4 pointer-top-accent-5 pointer-top-success pointer-top-info pointer-top-warning pointer-top-danger pointer-top-transparent |
Sets the theme color for a top pointer. |
| pointer-right-* | pointer-right-sm pointer-right-md pointer-right-lg |
Defines a right pointer at a specified size. |
| pointer-right-* | pointer-right-default pointer-right-light pointer-right-dark pointer-right-accent-1 pointer-right-accent-2 pointer-right-accent-3 pointer-right-accent-4 pointer-right-accent-5 pointer-right-success pointer-right-info pointer-right-warning pointer-right-danger pointer-right-transparent |
Sets the theme color for a right pointer. |
| pointer-bottom-* | pointer-bottom-sm pointer-bottom-md pointer-bottom-lg |
Defines a bottom pointer at a specified size. |
| pointer-bottom-* | pointer-bottom-default pointer-bottom-light pointer-bottom-dark pointer-bottom-accent-1 pointer-bottom-accent-2 pointer-bottom-accent-3 pointer-bottom-accent-4 pointer-bottom-accent-5 pointer-bottom-success pointer-bottom-info pointer-bottom-warning pointer-bottom-danger pointer-bottom-transparent |
Sets the theme color for a bottom pointer. |
| pointer-left-* | pointer-left-sm pointer-left-md pointer-left-lg |
Defines a left pointer at a specified size. |
| pointer-left-* | pointer-left-default pointer-left-light pointer-left-dark pointer-left-accent-1 pointer-left-accent-2 pointer-left-accent-3 pointer-left-accent-4 pointer-left-accent-5 pointer-left-success pointer-left-info pointer-left-warning pointer-left-danger pointer-left-transparent |
Sets the theme color for a left pointer. |