7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Code
  2. News

Fun With CSS Shapes

Scroll to top
Read Time: 2 mins

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 shapescss shapescss shapes

Yet Another

css shapes
css shapescss shapescss 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 blockquoteSpan tag within a blockquoteSpan 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.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.