1

I'm adapting the CSS used to create a speech bubble. The CSS source is http://forrst.com/posts/How_to_Make_a_Pure_CSS_Speech_Bubble_With_a_Drop-PU1.

I'm changing the background of the bubble to white, and adding an orange border. My problem is I can't get the border around the triangle along the bottom of the bubble to display. The triangle itself should be white (#fff) and the border is #DD4814.

Screenshot below and Fiddle here: http://jsfiddle.net/tuGHT/. Does anyone have an idea on appropriate CSS, please?

enter image description here

CSS

.bubble {
background-color: #fff;
border-radius: 7px;
border: 2px solid #DD4814;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
            4px 4px 0 hsla(0,0%,0%,.1);
color: #333;
display: inline-block;
font-family: Ubuntu, sans-serif;
font: 16px/25px;
padding: 15px 25px;
position: absolute;
right: 20px;
}

.bubble:after, .bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #fff;
bottom: -25px;
content: '';
position: absolute;
right: 25px;
}
.bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 22px;
}

HTML

<span class="bubble">Speech bubble right</span>
Clive van Hilten
  • 851
  • 5
  • 16
  • 32
  • 1
    You can't do that with pure CSS. If you need the border, you'll have to use an image for the arrow. – BenM Apr 08 '13 at 10:53
  • I don't agree with @BenM. Refer these articles : http://www.sitepoint.com/pure-css3-speech-bubbles/ http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ – Rahul Patil Apr 08 '13 at 11:04
  • You could use both the `::before` and the `::after` css-styles to be to different arrows. one red and then one smaller in white. – Corfitz. Apr 08 '13 at 11:15

2 Answers2

5

This is how I usually do it: DEMO

Basically you need another slightly larger :before or :after element positioned behind the first.

.bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -28px;
    right: 22px;
    z-index: 1;
}
.bubble:before {
    border-right: 27px solid #DD4814;
    border-bottom: 27px solid transparent;
    bottom: -29px;
    right: 23px;
    z-index: 0;
}
Turnip
  • 35,836
  • 15
  • 89
  • 111
  • You could also make use of [CSS filters](http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison) to improve the rendering of the drop shadow, as seen in [this fiddle](http://jsfiddle.net/cherryflavourpez/9UPZP/) (WebKit only for simplicity's sake). – CherryFlavourPez Apr 08 '13 at 11:29
  • Thanks to 3rror404 for the first correct answer and also to CherryFlavourPez for a comment showing a very nice drop shadow effect! – Clive van Hilten Apr 08 '13 at 11:58
0

this is place in your css code

.bubble:before:after {
top: 45px;
left: -14px;
bottom: auto;
border-width: 15px 21px 0 0;
border-color: transparent #ebea85;
}

it shows bubble always place in fixed place

chandra sekhar
  • 1
  • 1