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!
Смотрите видео Create Slanted or Razor-Blade Div Shapes with CSS3 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Arjun Khara 16 Январь 2017, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 53,796 раз и оно понравилось 1.3 тысяч людям.