Create Slanted or Razor-Blade Div Shapes with CSS3
(Video Uploaded in HD format)
Creating slanted (or razor-blade) div container shapes is easy using CSS3. There are two elements that come together: (a) a normal div, and (b) a pseudo class for the div. Put these together in your HTML document, then add and adjust three important properties to your pseudo class: z-index, transform-origin, and transform.
• The z-index property places your pseudo class rectangle behind the main div so that the main div's contents are visible.
• The transform-origin property sets a reference point (i.e. top left, top right, bottom left, bottom right) for your pseudo class rectangle to refer to, or originate from.
• The transform property skews your rectangle along the Y axis (using the skewY(4deg); property) to tilt or skew your rectangle. You can change the value of '4deg' to any angle you like which looks good.
Build cool and unique layouts with this simple CSS code snippet. The code snippet is in my first comment below. Enjoy!
Watch video Create Slanted or Razor-Blade Div Shapes with CSS3 online without registration, duration hours minute second in high quality. This video was added by user Arjun Khara 16 January 2017, don't forget to share it with your friends and acquaintances, it has been viewed on our site 53,796 once and liked it 1.3 thousand people.