Shape Dividers

The Best Way to modernize your Sections! Period. Convert your Background Sections into Great Looking Blocks using our wide range of Shape Dividers with great flexibility options.

Code Example

<div class="shape-divider" data-height="120" data-shape="mountains-3" data-outside="true" data-flip-vertical="true"></div>

Settings

Setting Description
data-shape

Choose the Type of your Shape Divider

Option(s):

  • valley
  • valley-2
  • valley-3
  • mountain
  • mountain-2
  • mountain-3
  • mountain-4
  • mountain-5
  • mountains
  • mountains-2
  • mountains-3
  • mountains-4
  • plateau
  • plateau-2
  • hills
  • hills-2
  • hills-3
  • hills-4
  • cloud
  • cloud-2
  • cloud-3
  • wave
  • wave-2
  • wave-3
  • wave-4
  • wave-5
  • wave-6
  • slant
  • slant-2
  • slant-3
  • rounded
  • rounded-2
  • rounded-3
  • rounded-4
  • rounded-5
  • triangle
  • drops
  • cliff
  • zigzag
  • illusion

Ex: data-shape="mountain"

data-position

Select the position for your Shape Divider relative to the Contaier

Option(s): top, bottom

Ex: data-position="top"

data-width

Enter a Width (int) of your Shape Divider. Minimum 100

data-height

Enter a Height (int) for your Shape Divider

data-fill

Enter a HEX or RGB Color for your Shape Divider

Ex: data-fill="#FFF"

data-outside

Enable/Disable this Option to position your Shape Divider outside the Container

Option(s): true, false

data-flip

Enable/Disable this Option to flip your Shape Divider horizontally

Option(s): true, false

data-flip-vertical

Enable/Disable this Option to flip your Shape Divider vertically

Option(s): true, false

Last Modified: June 4, 2020