Image Shapes

These classes will turn the image module into a shape.

 

Element Shape classes

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

 

  • image-slant-up-right 
  • image-slant-up-left
  • image-slant-down-right
  • image-slant-down-left
  • image-slant-right-top
  • image-slant-right-bottom
  • image-slant-left-top
  • image-slant-left-bottom
  • image-point-up
  • image-point-down
  • image-point-right
  • image-point-left

Usage

Add any of the classes to Image Settings > Advanced tab > CSS ID & Classes > CSS Class.

These hacks use the css clip-path property to ‘crop’ out the edges to give the image a new shape.

Use with

Image Module

Design

Scroll down to the star shape to see how to add a drop shadow to the images.

Notes

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

Examples

image-point-up

image-point-right

image-point-down

image-point-left

image-wide-bottom-trapezoid

image-wide-top-trapezoid

image-wide-right-trapezoid

image-wide-left-trapezoid

image-polygon-top-left

image-polygon-top-right

image-polygon-bottom-left

image-polygon-bottom-right

image-vertical-skew-left

image-vertical-skew-right

image-horizontal-skew-right

image-horizontal-skew-left

image-chevron-right

image-chevron-left

image-chevron-up

image-chevron-down

image-slant-up-right

image-slant-up-left

image-slant-down-right

image-slant-down-left

image-slant-right-top

image-slant-left-bottom

image-slant-right-bottom

image-slant-left-top

image-vertical-hexagon

image-horizontal-hexagon

image-warp-square

image-diamond

image-star (best with square images)

Add a shadow using the CSS filter property!

  • -webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.5));
  • filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.5));