Now you too can make the very basic shapes known as the circle and triangle in CSS. It’s easy, you’ll like it! This will only work for modern browsers that allow CSS3. Otherwise, tough love.. In fact, I haven’t ¬†tested it in IE9 so who really knows. It will work in Firefox and Chrome.

The tricks to these shapes involve using a div and calling the respective class.

The Circle

Fairly simple. This just involves manipulating the border radii until you get a circle shape. Using a line-height that equals the height of the div will vertically align/center your text.

CSS Circle

The CSS easier DIV than you think..

Use this code to get started.

.circle {
background-color: #37A047;

line-height: 100px;
font-weight: bold;
font-size: 22px;
font-family: sans-serif;

The Triangle

The triangle DIV is a little trickier as it involves nesting another DIV inside for the text. No text = No Nest.

CSS Triangle

Making a triangle in CSS can be tricky..

The CSS portion:

.triangle {
width: 0;
height: 0;
border-bottom: 80px solid #37A047;
border-left: 50px solid transparent;
border-right: 50px solid transparent;

.triangleNest {
padding-top: 60px;
margin-left: -35px;
font-weight: bold;
font-size: 14px;
font-family: sans-serif;
color: white;

The HTML portion:

<div class="triangle">
<div class="triangleText">TRIANGLE</div>

The Square

CSS Square

So sure everyone already knows how to make a square using CSS..but why not include it anyway?



One Response to How to Create DIV Shapes Like Triangles and Circles

  1. Nancy says:

    Thanks for the share!

Leave a Reply

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


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>