This technique allows you to create a background to a div that looks as if it is rotated.
See the Pen rotated bottom border thing by Noah (@noahbass) on CodePen.
The stlying for this component is built underneath the content. So add your content first:
From here you can concentrate on styling the content itself before worrying about the fancy rotated border. Here is some sass styling to get started:
Now onto the rotated bottom border part. It is built from the css
::before psuedo selector. So set that up first with a background color to start:
Concentrating on the
&::before part of the sass, you’ll notice that the background color overlays the content. Easy fix:
Now to get the component flush to the top and left:
Finally, the transforms that rotate the background.
All you need to do is apply vendor prefixes and your good to go.