Ajax Loader
×

Arrows with CSS

Left arrow,right arrow, upside arrow,downside arrow,with no images using only CSS.

to create an arrow with a div, we set height and width as zero for both.

width:0; height:0;

As we all know ,syntax of 'border-color' property is as below,

border-color: color1 color2 color3 color4;

Now we make 3 borders as transperant and only one border as colored, now the magic happens!

border-color: violet transparent transparent transparent; /Coloring of top, right, bottom, and left border/

border-style: dashed; /*Defining the border-style!

Now set Border-width!

border-width: 25px; /width of each border/

Its done! so simple !

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Arrows with CSS

    CSSDeck G+