Fun With CSS Shapes

I bet a bunch of you don’t realize that we can create the illusion of shapes by using 100% CSS. By utilizing the border property in creative ways, we can make some really interesting polygons. In this week’s screencast, we’ll figure out a way to create speech-bubbles without resorting to background images.

Most of us, by now, are familiar with using the “-moz-border-radius” and “-webkit-border-radius” properties to create rounded corners – or even complete circles – but there are other techniques to create more complicated shapes.

Traditional Speech-Bubble

blockquote#one {
 width: 250px;
background: #e3e3e3;
padding: 25px;
position: relative;
}

#one .arrow {
 width: 0; 
 height: 0;
 line-height: 0;
 border-top: 30px solid #e3e3e3;
 border-left: 60px solid white;
 border-right: 10px solid white;
 position: absolute;
 bottom: -30px;
 right: 30px;
}

Note how the “bottom” property is the reciprocal of the “border-top” property.

Alternate

blockquote#two {
 width: 250px;
background: #e3e3e3;
padding: 25px;
position: relative;
}

blockquote#two .arrow {
 width: 0;
height: 0;
line-height: 0;
border-top: 40px solid #e3e3e3;
border-left: none;
border-right: 30px solid white;
position: absolute;
bottom: 60%;
right: -30px;
}

Yet Another

blockquote#three {
 width: 450px;
 background: #e3e3e3;
 padding: 25px;
 position: relative;
}

#three .arrow {
 width: 0;
 height: 0;
 line-height: 0;
 border-bottom: 25px solid #e3e3e3;
 border-right: 50px solid white;
 position: absolute;
 top: -24px;
 left: 20px;
}

Interesting Note

I’m typing this paragraph minutes before posting the tutorial. I learned something tonight. Did you know that, if you want your document to validate, you can’t place text directly into a blockquote? It needs to be nested within a parent element – like the <p> tag. Additionally, the validator didn’t like the fact that I used a span tag within the blockquote. It allows for a plethora of elements, but unfortunately not the span! Oh well; no big deal. Just replace it with a different element. It hardly makes a difference.

Pretty Nifty

I’m really eager to see how you guys have implemented this unique trick into your own projects. Send us links to your examples, via the comments. Thanks for watching. Next week, plan on learning something much more advanced. …I just need to figure out what! Until then.

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.