How to Draw Speech Bubble and Shapes with CSS3

Drawing with CSS in a trendy topic these days. Today i will show you in this post how to draw speech bubbles and basic shapes (Like envelope, book mark, starburst ect...). These tips are the basic to drawing more complex drawings.

Before going to the shapes, i will explain the CSS border-width and border-color Property.

CSS

#box{
 border-width:30px 30px 30px 30px;
 border-color: #FF0 #009 #060 #F00;
 border-style:solid;
 height:50px;
 width:50px;
}

You will get the below result:

we have set the border-width top:30px, left:30px, bottom:30px and right 30px. You can clearly indetify setting border-color property using different color as above example.

Let see more closer.

CSS

#box{
 border-width:30px 30px 30px 30px;
 border-style:solid;
 border-color: #FF0 #009 #060 #F00;
 height:1px;
 width:1px;
}

You will get the below result:

The height and the width of the box is 1px. This CSS let us to get the triangle

CSS

#box{
 border-width:30px 30px 30px 30px;
 border-style:solid;
 border-color: #FF0 transparent transparent transparent;
 height:1px;
 width:1px;
}

You will get the below result:

We set the border-color for top only. Others are transparent. So we can get the triangle shape.

Now we will see how to draw a speech bubble in CSS3.

The final result:

HTML

 <div >
<p class="speech-bubble">THIS IS SPEECH BUBBLE</p>
</div>

CSS

.speech-bubble {
position:relative;
padding:15px;
color:#000;
background:#f6ff00;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

This CSS shows how to draw a boder redius in CSS3. More details please visit my previous tutorial CSS3 Exciting Border Functions and Features

CSS

 /* creates triangle */
.speech-bubble:after {
content:"";
display:block;
position:absolute;
bottom:-30px;
left:50px;
width:0;
height:0;
border-width:15px 15px 15px 15px;
border-style:solid;
border-color: #f6ff00 transparent transparent transparent ;
}

:before and :after pseudo-elements:

Using pseudo-elements will help us in reducing the amount of unnecessary HTML code. By using these elements, we will have minimal markup. In this case, just one empty div , Note these pseudo-elements are in CSS2 specs.

Envelope

The final result:

HTML

<div class="envelope">
</div>

CSS

.envelope {
content:"";
display:block;
position:absolute;
left:50px;
top:50px;
width:0;
height:0;
border-width:50px 100px 50px 100px;
border-style:solid;
border-color: #9c9c9c #000 #000 #000 ;
margin:5px;
}

.envelope:before {
content:"";
display:block;
position:absolute;
bottom:-30px;
left:-100px;
top:-150px;
width:0;
height:0;
border-width:50px 100px 50px 100px;
border-style:solid;
border-color: transparent transparent #000 transparent ;
}

Lets see some book mark shape

The final result:

HTML

<div>
<p class="bookmark after"></p>
</div>

CSS

.bookmark{
 display:block;
 width:100px;
 height:200px;
 background:#fe0;
 position:relative;
 left:50px;
}

.bookmark:after {
content:"";
display:block;
position:absolute;
bottom:-80px;
width:0;
height:0;
border-width:30px 50px 50px 50px;
border-style:solid;
border-color:#fe0  transparent transparent transparent ;
}

Another book mark shape

HTML

<div>
<p class="bookmark1 after"></p>
</div>

CSS

 .bookmark1{
 display:block;
 width:100px;
 height:200px;
 background:#fe0;
 position:relative;
 left:50px;
}

.bookmark1:after {
content:"";
display:block;
position:absolute;
bottom:-80px;
left:0;
width:0;
height:0;
border-width:50px 50px 50px 50px;
border-style:solid;
border-color:#fe0  #fe0 transparent #fe0 ;
}

Now we will see CSS3 rotation property. All we needed was a series of nested block-level elements each rotated by a slightly different amount. The rotation would distribute the box corners around the circumference of the star.

To start with I created a 16 pointed star by using three nested span elements inside a div.

The final Result

HTML

<div class="starburst">
<span><span><span>
<p>STARBURST</p>
</span></span></span>
</div>

CSS

.starburst {
 display:block;
 width:100px;
 height:100px;
 background:#fe0;
 -webkit-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
 rotation:45deg;
 position:relative;
 left:50px;
 top:50px;
 text-align:center;
 text-decoration:none;
 color:#000;
 font-weight:bold;
 font-family:Arial, sans-serif;
}

-webkit-transform:rotate and -moz-transform:rotate will rotate the box in to -45 degree and the other is the standard rotation rule as it will be used once this rotation property becomes standard.

CSS

.starburst span {
 display:block;
 width:100px;
 height:100px;
 background:#fe0;
 -webkit-transform:rotate(22.5deg);
 -moz-transform:rotate(22.5deg);
 rotation:22.5deg;
}

span element will rotate the box into 22.5 degree. So you will get the starburst shape.

Flower

The final Result:

HTML

 
<div class="flower">
<span><span><span>
<p>FLOWER</p>
</span></span></span>
</div>

CSS

.flower {
 display:block;
 width:100px;
 height:100px;
 background:#fe0;
 -moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
radius:15px;
 position:relative;
 top:50px;
 left:50px;
}

.flower span {
 display:block;
 width:100px;
 height:100px;
 background:#fe0;
 -webkit-transform:rotate(22.5deg);
 -moz-transform:rotate(22.5deg);
 rotation:22.5deg;
  -moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}

Ribbon

The final result:

HTML

<div>
<div class="ribbon">
<span><span><span><span><span><span><span><span>
<p>RIBBON</p>
</span></span></span></span></span></span></span></span>
</div>
<div class="ribbonL"></div>
<div class="ribbonR"></div>
</div>

CSS

.ribbon {
 display:block;
 width:100px;
 height:100px;
 background:#fe0;
 -webkit-transform:rotate(-67.5);
 -moz-transform:rotate(-67.5);
 rotation:-67.5;
 position:relative;
 top:50px;
 left:50px;
 text-align:center;
 text-decoration:none;
 color:#000;
 font-weight:bold;
 font-family:Arial, sans-serif;
}

.ribbon span {
 display:block;
 width:100px;
 height:100px;
 background:#fe0;
 -webkit-transform:rotate(11.5deg);
 -moz-transform:rotate(11.5deg);
 rotation:11.5deg;
}

.ribbonL {
 width:30px;
 height:200px;
 background:#fe0;
 -webkit-transform:rotate(11.5deg);
 -moz-transform:rotate(11.5deg);
 rotation:11.5deg;
 position: relative;
 left:50px;
 top:50px;
}

.ribbonR {
 width:30px;
 height:200px;
 background:#fe0;
 -webkit-transform:rotate(-11.5deg);
 -moz-transform:rotate(-11.5deg);
 rotation:-11.5deg;
 position: relative;
 left:110px;
 top:-150px;
}

Try out the CSS3 rotation property for your self and see what you can come up with.

Comments

0 #3 KingKoru 2012-03-22 08:28

Great!! Thanks a million...

Bookmarked and followed!

Quote

-3 #2 niamor 2011-08-18 18:13

Nice
But whatever the tricks, and whatever the shape by the way, cube, round, triangle, etc... it's only visual and the DOM object is style square. If you want to add some interactivity on a ccs cube like a simple click event, the event will be fire with the DOM square object, meaning with the cube, but with the 4 corners outside the cube too. Real issue if you have 2 superposed cubes.
So for a visual effect, it's really cool but for more not really.
I have searche a lot without finding a real solution. We have 'canvas' but it's not really the same philosophy... we have SVG, but it's really fastidious...

-2 #1 Amitava Chatterjee 2011-03-11 10:46

This was extremely helpful. I would be happy to get such tutorials in future.
Thanks once again.

Refresh comments list
RSS feed for comments to this post

sendesignz