Media WebUI

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");

});

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.
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
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>