CSS Tricks and the Alternate Universe of Graphics Primitives

Thursday, August 25, 2011

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):

hello

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:

triangle

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.


Comments
gravatar Zed Friday, September 2, 2011
I tried this in IE 7 but it renders a square unfortunately. Firefox renders perfectly.
gravatar Oleg Friday, September 9, 2011
Hi Scott,

You probably don't need these tricks with JS library Raphaël http://raphaeljs.com/ Simple check it.

And for cross-browser round corners and other shapes there is a great library from the creator of jQuery blockUI plugin - http://jquery.malsup.com/corner/ It works smooth in my web projects.

Have much fun and thanks for this blog!
- Oleg.
gravatar scott Monday, September 12, 2011
@Oleg:

Funny you should mention it - I just started working with Raphael. It's impressive.
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!