Reusable Polygon Element

By: Ahmed Zakaria

Folder Tree

• polygon.css
• polygon.js

Polygon Element HTML

• .Polygon-container
  • div
    • img or h1
    • div
      • .polygonParent
        • .polygonBorder
        • .polygonShadow
        • .polygonContent
          • p or ul or both ...as you like

createPolygon Function Parameters

Parameter	Explanation
polygonParentId	polygon element wrapper - id
imgSrc	polygon head h1 img
h1Content	polygon head h1 content
h1Sp1Stork	polygon head h1 first span - stork color
h1Sp2Color	polygon head h1 second span - color
headImg	polygon head img
polygonValue	polygon clip-path value
contentSelf	polygon content
contentFontSize	polygon content - font size
contentBack	polygon content - background color
polygonParentWidth	.polygonParent - width
polygonParentHeight	.polygonParent - height
polygonBorderBack	.polygonBorder - background color
polygonShadowBack	.polygonShadow - background color
polygonShadowColor	.polygonShadow - box-shadow color

How to use ?

• import Reusable Polygon css and js file
• type html wrapper element and call createPolygon function as following
• 
• output
• 

Notes :

• polygon head should be h1 or img , value of parameter not needed = null (from h1Content, headImg)
• Polygon Element able to update with css
• Polygon Element need to edit before, after, positions, media to visable clear

• don't hesitate to ask for anything not understand , you are welcome🙂