CODEWITHSUNDEEP
css
Reham Fahmy
Reham Fahmy

Reputation: 5073

how to add border to CSS only speech bubble

I'm using the following code for pure css speech bubble but however i still can not add border to the whole bubble include the arrow at down side

HTML

<div class="bubble">Welcome</div>

CSS Code

.bubble {
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}

.bubble:after, .bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -25px;
content: '';
position: absolute;
right: 25px;
}

.bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 22px;
}

Results

enter image description here

if i added border code border:2px solid #493A34; at class .bubble

Results

enter image description here

Problem

How to add the border to the arrow as well ? ~ any idea

EDIT: Here is the fiddle link with box-shadow applied.

Upvotes: 3

Views: 1885

Answers (2)

circusdei
circusdei

Reputation: 1967

You can make a slightly larger brown arrow with the :after psudo-element, and position it behind the smaller green arrow (made with :before), and down 2px to create a border effect.

here's the fiddle: http://jsfiddle.net/rhGCb/

And the css:

.bubble {
  border:2px solid #493A34;
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}



.bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #493A34;
bottom: -27px;
content: '';
position: absolute;
right: 23px;

}


  .bubble:after {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -23px;
content: '';
position: absolute;
right: 25px;
}

Upvotes: 2

Wouter J
Wouter J

Reputation: 41954

A bit of a trick, but you can add a box-shadow that behaves as a border (meaning, blur is set to 0):

.speech-bubble{
    /* ... */

    /* 2px = border-width #333 = border-color */
    -webkit-box-shadow:0 0 0 2px #333;
            box-shadow:0 0 0 2px #333;
}

Upvotes: 0

Related Questions