Module Shapes

These classes will add shapes behind the module, column, or row that you put this class in.

 

Element Shape classes

  • wide-bottom-trapezoid 
  • wide-top-trapezoid
  • wide-right-trapezoid 
  • wide-left-trapezoid
  • polygon-top-left
  • polygon-top-right 
  • polygon-bottom-left
  • polygon-bottom-right
  • vertical-skew-right 
  • vertical-skew-left
  • horizontal-skew-right 
  • horizontal-skew-left
  • chevron-right 
  • chevron-left
  • chevron-up
  • chevron-down 
  • point-up
  • point-down
  • point-left
  • point-right
  • speech-bubble-left
  • speech-bubble-right 
  • speech-bubble-right-top
  • speech-bubble-right-bottom 
  • speech-bubble-left-top
  • speech-bubble-left-bottom
  • slant-up-right 
  • slant-up-left
  • slant-down-right 
  • slant-down-left
  • slant-right-top
  • slant-right-bottom
  • slant-left-top
  • slant-left-bottom
  • vertical-hexagon 
  • horizonal-hexagon
  • star
  • warp-square
  • diamond 

Usage

Add any of the classes to Module or Row Settings > Advanced tab > CSS ID & Classes > CSS Class or any of the Column CSS Class boxes.

These hacks use the :before element to add shapes behind your element, inheriting the background color you set in that row, column or module.

Design

Background Color (or Gradient) 
Module or Row Settings > Content Tab > Background

Notes

These shapes will NOT show up on Internet Explorer or Microsoft Edge because they don’t support the clip-path css property. Instead, it will just show the element without the shape.

Examples

wide-bottom-trapezoid

wide-top-trapezoid

wide-right-trapezoid

wide-left-trapezoid

chevron-right

chevron-left

chevron-up

chevron-down

vertical-skew-left

vertical-skew-right

horizontal-skew-left

horizontal-skew-right

horizontal-hexagon

vertical-hexagon

slant-up-right

slant-up-left

slant-down-right

slant-down-left

slant-right-bottom

slant-right-top

slant-left-top

slant-left-bottom

polygon-top-left

polygon-top-right

polygon-bottom-left

polygon-top-right

point-left

point-right

point-up

point-down

speech-bubble-left

speech-bubble-right

speech-bubble-left-top

speech-bubble-left-bottom

speech-bubble-right-top

speech-bubble-right-bottom

star

warp-square

diamond

diamond

diamond

Add a drop shadow!

Box shadows don’t work on shapes, instead add this custom CSS to the module. Modify the properties to match your designs.

filter:drop-shadow(0px 5px 6px rgba(0,0,0,0.2));
-webkit-filter:drop-shadow(0px 5px 6px rgba(0,0,0,0.2));

star

filter:drop-shadow(0px 5px 0px #dd7017) drop-shadow(0px 4px 0px #dd7017) drop-shadow(0px 3px 0px #dd7017) drop-shadow(0px 2px 0px #dd7017);
-webkit-filter:drop-shadow(0px 5px 0px #dd7017) drop-shadow(0px 4px 0px #dd7017) drop-shadow(0px 3px 0px #dd7017) drop-shadow(0px 2px 0px #dd7017);