Drawing lines with linear-gradient

 The author of the icons at 'css.gg' has an interesting way of drawing lines.

He creates a background of just one color using a linear-gradient. He then clips the background using the 'position/bg-size' syntax. 

Here is an example of a red vertical line at the top of a box and a blue horizontal line at the bottom:

    .gg-arrows-merge-alt-v {

        width: 12px;

        height: 22px;

        background:

            linear-gradient(

                to left,red 10px,

                transparent 0)

                no-repeat center top/2px 8px,

            linear-gradient(

                to left,blue 10px,

                transparent 0)

                no-repeat center 20px/10px 2px

    }

I think this method is used because the icons at 'css.gg' are made using just a 'div' and its ':after' and ':before' elements

There are more tips at: bbingo.xyz/techtips/