Maybe some day you’ve wondered how some people do crazy shapes with HTML and CSS. Well, they just hack a little bit. Paragraphs or divisions or whatever you want can be made into some beautiful shapes. And it all starts with a circle.

The doing of a circle, how to?

First you put a paragraph in the body. Put an id or class with it.

Next with CSS you give it all sorts of properties. Basically, a circle here is just 4 border radiuses  without any side length. See the full code for 2 circles.

circht

circht2

and the result is :

circht3

Just a nice trick i wanted to share!

The !DOCTYPE tells that you are using HTML5

The meta charset tells which sets of characters you are using.

The style begining and closing tag in between is where you put the CSS properties

To view the result just save the write the code and save it to myfile.html. Open it then!

Advertisements