Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. News

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

css shapes

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


css shapes

Yet Another

css shapes
css shapes

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.

Span tag within a blockquote

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.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.