WebUI mobile-first CSS

Transform Shapes

WebUI supports both transform shapes and shapes making use of clip-path. Transform shapes that work by transforming multiple div elements are widely supported by modern browsers. But although clip-path shapes are more powerful, they are not supported by Internet Explorer or Microsoft Edge. Both types of shapes are provided with a set of default ready-made shapes and also a single custom shape utility.

Classes

Class

Description

diamond-flat-shape

Creates a flat diamond shape when applied to a div element.

diamond-shape

Creates a regular diamond shape when applied to a div element.

hexagon-shape

Creates a hexagon shape when applied to a div element.

isosceles-shape

Creates a isosceles triangle shape when applied to a div element.

octagon-shape

Creates a octagon shape when applied to a div element.

parallelogram-shape

Creates a parallelogram shape when applied to a div element.

rhombus-shape

Creates a rhombus shape when applied to a div element.

scalene-left-shape

Creates a left scalene triangle shape when applied to a div element.

scalene-right-shape

Creates a right scalene triangle shape when applied to a div element.

Data Attributes

Attribute

Description

data-size

A CSS 3 size unit, e.g. "5rem".

data-rotation

Specify the degree of rotation required for the whole shape.
A numeric value, positive or negative. Default: 0

data-class

A CSS class to be applied to the background of the shape, e.g. a background image or color.

data-modifiers

Specifies the CSS transform values for the shape container elements.

The data-rotation attribute will apply rotation to the shape and any image inside, so using an appropriately rotated image may be required.

When using a background image it is important to use a suitable size and ensure that it is a true square - this will prevent the image from being stretched or shrunk. The image can be any size within reason, but you will want to ensure it does not get unnecessarily stretched or distorted. The easiest way is to make the image match the size specified for the shape itself. Transform shapes only allow a background image to be set, rather than an img element nested inside the shape.

Example

Markup

<div class="form-row col-padding-lg">
  <div class="form-col-eq-3">
    <div class="isosceles-shape align-media-center" data-size="4rem" data-rotation="0" data-class="custom-image"></div>
  </div>
  <div class="form-col-eq-3">
    <div class="rhombus-shape align-media-center" data-size="4rem" data-rotation="0" data-class="custom-image"></div>
  </div>
  <div class="form-col-eq-3">
    <div class="parallelogram-shape align-media-center" data-size="4rem" data-rotation="0" data-class="custom-image"></div>
  </div>
</div>
<div class="form-row col-padding-lg">
  <div class="form-col-eq-3">
    <div class="diamond-shape align-media-center" data-size="4rem" data-rotation="0" data-class="custom-image"></div>
  </div>
  <div class="form-col-eq-3">
    <div class="hexagon-shape align-media-center" data-size="4rem" data-rotation="0" data-class="custom-image"></div>
  </div>
  <div class="form-col-eq-3">
    <div class="octagon-shape align-media-center" data-size="4rem" data-rotation="0" data-class="custom-image"></div>
  </div>
</div>
<div class="form-row col-padding-lg">
  <div class="form-col-eq-3">
    <div class="diamond-flat-shape align-media-center" data-size="4rem" data-rotation="0" data-class="custom-image"></div>
  </div>
  <div class="form-col-eq-3">
    <div class="scalene-left-shape align-media-center" data-size="5rem" data-rotation="0" data-class="custom-image"></div>
  </div>
  <div class="form-col-eq-3">
    <div class="scalene-right-shape align-media-center" data-size="5rem" data-rotation="0" data-class="custom-image"></div>
  </div>
</div>

Custom Shapes

By specifying the class custom-shape instead of one of the pre-defined shapes, and using an additional parameter data-modifiers, you can create your own custom shapes by experimenting with individual values. However, if you are familiar enough with how CSS transforms behave, then you will have a head start.

Example

Markup

<div class="custom-shape align-media-center" data-size="5rem" data-rotation="0" data-modifiers="0.9,0.8,-110,-.05,0,0.8,0.9,110,.1,.12,1,1,0,-0.1,-0.1" data-class="custom-image"></div>

Transform Modifiers

Modifier values represent 3 groups of 5 values. The first group controls the shape container div or the outer most div (Not the div you specify in your markup, but it's immediate child'). The second group controls the inner div or the child of the container. Finally, the third group controls the content div or the inner most div.

The following table explains each transform modifier value in the order they are placed in the modifier array.

Modifier

Description

1

The multiplying factor of the container width relative to the shape size value.

2

The multiplying factor of the container height relative to the shape size value.

3

The degree of rotation (CSS rotate property) of the container div.

4

The multiplying factor of the container X-axis movement (CSS translateX property) relative to the shape size value.

5

The multiplying factor of the container Y-axis movement (CSS translateY property) relative to the shape size value.

6

The multiplying factor of the inner div width relative to the shape size value.

7

The multiplying factor of the inner div height relative to the shape size value.

8

The degree of rotation (CSS rotate property) of the inner div.

9

The multiplying factor of the inner div X-axis movement (CSS translateX property) relative to the shape size value.

10

The multiplying factor of the inner div Y-axis movement (CSS translateY property) relative to the shape size value.

11

The multiplying factor of the content div width relative to the shape size value.

12

The multiplying factor of the content div height relative to the shape size value.

13

The degree of rotation (CSS rotate property) of the content div.

14

The multiplying factor of the content div X-axis movement (CSS translateX property) relative to the shape size value.

15

The multiplying factor of the content div Y-axis movement (CSS translateY property) relative to the shape size value.

Shape Positioning

The snap positioning tool is an ideal way to position shapes relative to any other element used as an anchor point. See Positioning or the DEMO-Grids-Positioning.html demo page with the install or download package.

Clip-Path Shapes

Not supported in Internet Explorer or Microsoft Edge

Creating a clip-path shape requires just a single div element, a specific shape class, and any WebUI classes that you might normally use to style elements, such as width, height, alignment, and background. Clip-path shapes allow you to use an image element nested inside the shape div if you prefer that approach, or you can apply the clip-path shape classes directly to the img element.

Classes

Class

Description

kite-clip-shape

Creates a kite shape when applied to a div element.

pentagon-clip-shape

Creates a regular pentagon shape when applied to a div element.

rhomboid-clip-shape

Creates a rhomboid shape when applied to a div element.

rhombus-clip-shape

Creates a rhombus shape when applied to a div element.

star-clip-shape

Creates a star shape when applied to a div element.

trapezoid-isosceles-clip-shape

Creates a trapezoid isosceles shape when applied to a div element.

triangle-isosceles-clip-shape

Creates a triangle isosceles shape when applied to a div element.

Example

Markup

<div class="form-row col-padding-lg">
  <div class="form-col-eq-3">
    <div class="width-sm-md height-sm-md align-center custom-image-2 rhombus-clip-shape"></div>
  </div>
  <div class="form-col-eq-3">
    <div class="width-sm-md height-sm-md align-center custom-image-2 rhomboid-clip-shape"></div>
  </div>
  <div class="form-col-eq-3">
    <div class="width-sm-md height-sm-md align-center custom-image-2 kite-clip-shape"></div>
  </div>
</div>
<div class="form-row col-padding-lg">
  <div class="form-col-eq-3">
    <div class="width-sm-md height-sm-md align-center custom-image-2 trapezoid-isosceles-clip-shape"></div>
  </div>
  <div class="form-col-eq-3">
    <div class="width-sm-md height-sm-md align-center custom-image-2 triangle-isosceles-clip-shape"></div>
  </div>
  <div class="form-col-eq-3">
    <div class="width-sm-md height-sm-md align-center custom-image-2 pentagon-clip-shape"></div>
  </div>
</div>
<div class="form-row col-padding-lg">
  <div class="form-col-eq-3">
    <div class="width-sm-md height-sm-md align-center custom-image-2 star-clip-shape"></div>
  </div>
  <div class="form-col-eq-3">
  </div>
  <div class="form-col-eq-3">
  </div>
</div>

Custom Shapes

Custom clip-path shapes are specified differently to transform shapes and require an additional javascript call.

Example

Markup

<div class="width-md height-md align-center custom-image-2" id="customClipShape"></div>

Script

webui.ready(function() {

  ui("#customClipShape").renderPolygonShape("0.2 0.7, 0.5 0, 0.5 0, 1 1");

});

Breadcrumb Shapes

Partial support in Internet Explorer

Breadcrumb shapes have been developed to be versatile in terms of styling, so you can use 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.

Example

Markup

<div class="breadcrumb">
  <a href="#0" class="breadcrumb-xs breadcrumb-line-light breadcrumb-first accent-5-dark hover-dark width-sm">
    <i class="fa fa-home text-md place-middle-center"></i>
  </a>
  <a href="#0" class="breadcrumb-xs breadcrumb-line-light text-xs accent-5 hover-dark flex-auto"><span class="place-middle-center">Link 2</span></a>
  <a href="#0" class="breadcrumb-xs breadcrumb-line-light text-xs accent-5-light hover-dark flex-auto"><span class="place-middle-center">Link 3</span></a>
  <a href="#0" class="breadcrumb-xs breadcrumb-last text-xs disabled color-accent-5 cursor-default flex-auto"><span class="place-middle-center">Link 4</span></a>	
</div>

<div class="row-spacing-md"></div>

<div class="breadcrumb">
  <a href="#0" class="breadcrumb-sm breadcrumb-line-light breadcrumb-rounded breadcrumb-first accent-2-dark hover-accent-1 width-sm">
    <i class="fa fa-home text-md place-middle-center"></i>
  </a>
  <a href="#0" class="breadcrumb-sm breadcrumb-line-light breadcrumb-rounded text-xs accent-2 hover-accent-1 flex-auto"><span class="place-middle-center">Link 2</span></a>
  <a href="#0" class="breadcrumb-sm breadcrumb-line-light breadcrumb-rounded text-xs accent-2-light hover-accent-1 flex-auto"><span class="place-middle-center">Link 3</span></a>
  <a href="#0" class="breadcrumb-sm breadcrumb-last text-xs disabled color-accent-5 cursor-default flex-auto"><span class="place-middle-center">Link 4</span></a>	
</div>

<div class="row-spacing-md"></div>

<div class="breadcrumb">
  <a href="#0" class="breadcrumb-md breadcrumb-first success-dark hover-muted width-sm">
    <i class="fa fa-home text-md place-middle-center"></i>
  </a>
  <a href="#0" class="breadcrumb-md text-xs success hover-muted flex-auto"><span class="place-middle-center">Link 2</span></a>
  <a href="#0" class="breadcrumb-md text-xs success-light hover-muted flex-auto"><span class="place-middle-center">Link 3</span></a>
  <a href="#0" class="breadcrumb-md breadcrumb-last text-xs disabled color-accent-5 cursor-default flex-auto"><span class="place-middle-center">Link 4</span></a>	
</div>

<div class="row-spacing-md"></div>

<div class="breadcrumb">
  <a href="#0" class="breadcrumb-lg breadcrumb-rounded breadcrumb-first rounded-left-md accent-3-dark hover-accent-2 width-sm">
    <i class="fa fa-home text-md place-middle-center"></i>
  </a>
  <a href="#0" class="breadcrumb-lg breadcrumb-rounded text-xs accent-3 hover-accent-2 flex-auto"><span class="place-middle-center">Link 2</span></a>
  <a href="#0" class="breadcrumb-lg breadcrumb-rounded text-xs accent-3-light hover-accent-2 flex-auto"><span class="place-middle-center">Link 3</span></a>
  <a href="#0" class="breadcrumb-lg breadcrumb-last rounded-right-md text-xs disabled color-accent-5 cursor-default flex-auto"><span class="place-middle-center">Link 4</span></a>	
</div>

<div class="row-spacing-md"></div>

<div class="breadcrumb">
  <a href="#0" class="breadcrumb-xl breadcrumb-line-muted breadcrumb-first rounded-left-md accent-1-dark hover-accent-2 width-sm">
    <i class="fa fa-home text-md place-middle-center"></i>
  </a>
  <a href="#0" class="breadcrumb-xl breadcrumb-line-muted text-xs accent-1 hover-accent-2 flex-auto"><span class="place-middle-center">Link 2</span></a>
  <a href="#0" class="breadcrumb-xl breadcrumb-line-muted text-xs accent-1-light hover-accent-2 flex-auto"><span class="place-middle-center">Link 3</span></a>
  <a href="#0" class="breadcrumb-xl breadcrumb-last rounded-right-md text-xs disabled color-accent-5 cursor-default flex-auto"><span class="place-middle-center">Link 4</span></a>	
</div>

Internet Explorer

Breadcrumb shapes can be used in Internet Explorer, but you will need to use the regular WebUI sizing classes to specify the width of each breadcrumb instead of using flexbox classes.

Razor-Blade Shapes

The following table describes the classes available in WebUI for razor-blade shapes.

Class

Description

razor

Defines a razor element. This is required with all razor styles.

razor-top-left-sm , razor-top-left-md , razor-top-left-lg , razor-top-left-full

Creates a razor edge at the top of an element angled up towards the left. The sizing suffix dictates the width of the element.

razor-top-right-sm , razor-top-right-md , razor-top-right-lg , razor-top-right-full

Creates a razor edge at the top of an element angled up towards the right. The sizing suffix dictates the width of the element.

razor-bottom-left-sm , razor-bottom-left-md , razor-bottom-left-lg , razor-bottom-left-full

Creates a razor edge at the bottom of an element angled down towards the left. The sizing suffix dictates the width of the element.

razor-bottom-right-sm , razor-bottom-right-md , razor-bottom-right-lg , razor-bottom-right-full

Creates a razor edge at the bottom of an element angled down towards the right. The sizing suffix dictates the width of the element.

razor-left-top-sm , razor-left-top-md , razor-left-top-lg , razor-left-top-full

Creates a razor edge to the left of an element angled left towards the top. The sizing suffix dictates the width of the element.

razor-right-top-sm , razor-right-top-md , razor-right-top-lg , razor-right-top-full

Creates a razor edge to the right of an element angled right towards the top. The sizing suffix dictates the width of the element.

razor-left-bottom-sm , razor-left-bottom-md , razor-left-bottom-lg , razor-left-bottom-full

Creates a razor edge to the left of an element angled left towards the bottom. The sizing suffix dictates the width of the element.

razor-right-bottom-sm , razor-right-bottom-md , razor-right-bottom-lg , razor-right-bottom-full

Creates a razor edge to the right of an element angled right towards the bottom. The sizing suffix dictates the width of the element.

You also need to add one of the following classes to specify the amount of angle needed.

Class

Description

razor-angle-sm

Specifies a small angle.

razor-angle-md

Specifies a medium angle.

razor-angle-lg

Specifies a large angle.

Razor Colors

Most theme colors can be used to color razor elements. The format is razor-[theme color]. For example: razor-accent-1-light.

Example

Donec quis dui at dolor tempor interdum.

Markup

<div class="box pad-top-xxl pad-bottom-xxl gap-vertical-xl">
  <div class="razor razor-bottom-right-full razor-accent-2-light razor-angle-sm accent-2-light height-sm-md">
  </div>
  <div class="razor razor-top-left-full razor-dark razor-angle-sm dark height-md-lg">
    <div class="place-bottom-left left-xs-sm bottom-xs-sm width-lg-xl">
      Donec quis dui at dolor tempor interdum.
    </div>
  </div>
  <div class="container">
    <div class="flex">
      <div class="razor razor-right-bottom-md razor-accent-2-light razor-angle-lg accent-2-light width-lg"></div>
      <div class="razor razor-left-top-md razor-dark razor-angle-lg dark width-lg">
      </div>
      <div class="color-light place-top-left left-md-lg top-sm width-md-lg">
        Lorem ipsum dolor sit amet, mei decore nonumy tamquam ad, cu alienum adipiscing per.
      </div> 
    </div>   
  </div>
</div>

Extend Shapes

The extend classes allow you to easily extend most elements with an arrow or bulge extension. The border of the element is also extended into the required shape.

Arrow Extend Classes

Class

Description

arrow-extend-left

Creates a left arrow extrusion when applied to a div element.

arrow-extend-top

Creates a top arrow extrusion when applied to a div element.

arrow-extend-right

Creates a right arrow extrusion when applied to a div element.

arrow-extend-bottom

Creates a bottom arrow extrusion when applied to a div element.

arrow-extend-sm

Specifies a small size arrow.

arrow-extend-md

Specifies a medium size arrow.

arrow-extend-lg

Specifies a large size arrow.

Bulge Extend Classes

Class

Description

bulge-extend-left

Creates a left bulge extrusion when applied to a div element.

bulge-extend-top

Creates a top bulge extrusion when applied to a div element.

bulge-extend-right

Creates a right bulge extrusion when applied to a div element.

bulge-extend-bottom

Creates a bottom bulge extrusion when applied to a div element.

bulge-extend-sm

Specifies a small size bulge.

bulge-extend-md

Specifies a medium size bulge.

bulge-extend-lg

Specifies a large size bulge.

Example

8

Markup

<div class="form-row align-media-center col-padding-md">
  <div class="form-col">
    <div class="container">
      <div class="arrow-extend-sm arrow-extend-right width-xs height-xs rounded-sm flex-items-center flex-justify-center border-sm border-accent-4 background-primary">
        <span>8</span>
      </div>
    </div>
  </div>
  <div class="form-col">
    <div class="container">
      <div class=" bulge-extend-sm bulge-extend-top width-xs height-xs rounded-sm flex-items-center flex-justify-center border-sm border-accent-4 background-primary">
        <span>8</span>
      </div>
    </div>
  </div>
</div>