On this page all the shapes are created using CSS and a single HTML element. All the CSS is editable, so you can even change it and see what it will look like.

Up Arrow

Down Arrow

Right arrow

Left arrow

Multi colored Div

Multi-color, border-style:double

Single color, border-style:double

Single color, border-style:groove

Multi-color, border-style:ridge

Multi-color, border-style:outset

Single color, border-style:inset

Single color, border-style:double, non-zero width

Multi colored Div, non-zero width:

Multi colored Div, non-zero height

Single color, border-style:double, non-zero height

Multi colored Div, non-zero height and width

Multi colored Div, different border widths and heights