CSS Tricks and the Alternate Universe of Graphics Primitives

Someone asked about the circular div I used for magnification in an earlier post. There are no primitives in CSS for building arbitrary shapes, but like most things on the web, that doesn't stop anyone from trying.

For example: don't think of a circular div as a circle. Think of a circular div as a square with heavily rounded corners.

Given this markup:

<div class="circle-small">
    <p>Hello!</p>
</div>

And this CSS:

.circle-small 
{
    width:100px;
    height:100px;
    border-radius: 50px;
    background-color: #cccc99;
}

.circle-small p
{
    text-align:center;
    font-weight:bold;
    padding-top:40px;
}

You can present the following content (assuming the user agent supports border-radius):

Try it here: http://jsfiddle.net/Jh2Nd/

But the fun doesn't stop with rounded corners. A long time ago someone looked at how the a browser renders borders and noticed a particular angle in the output, which gives us another "primitive" we can use to create shapes, like a triangles:

<style>
.triangle-blue
{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
}
</style>
<div class="triangle-blue"></div>

Which renders:

Try it here: http://jsfiddle.net/NCxEQ/

Once you have some primitives in hand, it's only a matter of inspiration until someone creates a house: http://www.designdetector.com/tips/3DBorderDemo2.html

Add in some CSS 3 transformations, and now you can have trapezoids, stars, hearts, and infinity symbols. See: The Shapes of CSS.