Polygonal CSS

Zach tweeted about an article on Polygonal CSS which got me thinking of this one time when I ran across a way to create circles from the <hr> tag. So I whipped up this little demonstration.

Note: I’ve testing this in Firefox 3 and IE 7. It works in Firefox, but not in IE. Sorry!

<hr width="0" size="50" noshade="noshade" />


<hr width="0" size="100" noshade="noshade" style="border: 40px solid red;" />


<hr width="0" size="100" noshade="noshade" style="border-top: 40px solid red; border-bottom: 40px solid red;" />


<hr width="0" size="50" noshade="noshade" style="border-top: 40px solid red; border-bottom: 40px solid red;" />


<hr width="0" size="100" noshade="noshade" style="border-top: 50px solid red; border-bottom: 50px solid red;" />


<hr width="0" size="100" noshade="noshade" style="color: green; border-top: 50px solid red; border-bottom: 50px solid red;; border-right: 50px solid red;" />


Leave a Reply

Your email address will not be published. Required fields are marked *