The Shapes of LESS CSS

Taken directly from The Shapes of CSS. Thanks, CSS-Tricks!

All of the shapes below use only a single HTML element. The CSS uses the LESS Shapes library. All the shapes can take size or height & width arguments, some of them have shape-specific arguments like degrees for an angle, and the final argument is always the primary color, which defaults to red.

Visit the LESS CSS Shapes Library on GitHub to view and download the source code and samples.

Square

.square {
	.square(100px);
}

.square2 {
	.square(10px, #F0F);
}

Circle

.circle {
	.circle(100px);
}

Rectangle

.rectangle {
	.rectangle(100px);
}

Oval

.oval {
	.oval(100px);
}

Triangle - Up

.triangle-up {
	.triangle-up(100px);
}

Triangle - Down

.triangle-down {
	.triangle-down(100px);
}

Triangle - Left

.triangle-left {
	.triangle-left(100px);
}

Triangle - Right

.triangle-right {
	.triangle-right(100px);
}

Triangle - Top Left

.triangle-topleft {
	.triangle-topleft(100px);
}

Triangle - Top Right

.triangle-topright {
	.triangle-topright(100px);
}

Triangle - Bottom Left

.triangle-bottomleft {
	.triangle-bottomleft(100px);
}

Triangle - Bottom Right

.triangle-bottomright {
	.triangle-bottomright(100px);
}

Parallelogram

.parallelogram {
	.parallelogram(100px);
}

.parallelogram2 {
	.parallelogram(100px, 40deg);
}

.parallelogram3 {
	.parallelogram(100px, 340deg);
}

Trapezoid

.trapezoid {
	.trapezoid(100px);
}

Six-Pointed Star

.star-six {
	.star-six(100px);
	margin:0 0 3em 0;
}

Five-Pointed Star

.star-five {
	.star-five(100px);
	margin:3em 0;
}

Pentagon

.pentagon {
	.pentagon(100px);
	margin:3em 0 1em;
}

Hexagon

.hexagon {
	.hexagon(100px);
	margin:2em 0;
}

Octagon

.octagon {
	.octagon(100px, #EEE);
	margin:2em 0;
}

Heart

.heart {
	.heart(100px);
}

Infinity

.infinity {
	.infinity(100px);
}

Diamond

.diamond {
	.diamond(100px);
}

Egg

.egg {
	.egg(100px);
}

Pac Man

.pacman {
	.pacman(100px);
}

Talk Bubble

.talkbubble1 {
	.talkbubble(100px);
	margin-left:2em;
}

.talkbubble2 {
	.talkbubble(100px*2.5, 80px);
	margin-left:2em;
}

12 Point Burst

.burst-12 {
	.burst-12(100px);
	margin:2em;
}

8 Point Burst

.burst-8 {
	.burst-8(100px);
	margin:1.5em;
}

Cut Diamond

.cut-diamond {
	.cut-diamond(100px, #CCF); // periwinkle
}

Yin Yang

.yin-yang {
	.yin-yang(100px, red, #eee);
}