11

So I'm working on a pure css speech bubble http://bit.ly/zlnngM but I'd like to have the border surround the entire speech bubble as seen here http://bit.ly/zUgeZi . I'm using the following markup;

<div class="speech-bubble"><p>This is a speech bubble created using only CSS. No images to be found here...</p></div

and I've so far styled it as follows;

.speech-bubble {
margin: 3em;
width: 320px;
padding: 10px;
background-color:rgba(250, 250, 250, 0.95);
color: #666;
font: normal 12px "Segoe UI", Arial, Sans-serif;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 10px solid rgba(0,0,0,0.095);
}

.speech-bubble:before
{
content: "";
border: solid 20px transparent; /* set all borders to 10 pixels width */
border-top: 0; /* we do not need the top border in this case */
border-bottom-color:rgba(250, 250, 250, 0.95);
width: 0;
height: 0;
overflow: hidden;
display: block;
position: relative;
top: -30px; /* border-width of the :after element + padding of the root element */
margin: auto;
}

.speech-bubble p {
margin-top: -15px;
font-size: 1.25em;
}

As you can see I can only add a border to the content box (.speech-bubble) but not the callout (.speech-bubble:before) My border will also need to be transparant. Not sure if this matters but it's something to bear in mind. Any advice?

Jedda
  • 1,007
  • 5
  • 14
  • 26
  • just use SVG backgrounds, its simpler. – c69 Jan 17 '12 at 15:10
  • @c69 Just starting to play around with SVG's but I was curious to see if it could be done with pure CSS. Cheers... – Jedda Jan 17 '12 at 16:56
  • yes, it **can be do**, but it **should not be**. – c69 Jan 17 '12 at 18:14
  • when you want graphics, you need graphics :) svg is vector image format - so it can scale with your `div`'s. Its supported even by IE9, and, of course, any other modern browser. CSS can be used to decorate blocks, but so can do ascii-art - yet most people don't use it. For a reason ;) – c69 Jan 17 '12 at 18:43
  • possible duplicate of [Speech bubble with arrow](http://stackoverflow.com/questions/30299093/speech-bubble-with-arrow) – jbutler483 May 22 '15 at 15:31

1 Answers1

18

You're pretty close. You just need to use both a :before and an :after to layer another triangular border.

Here's a jsfiddle: http://jsfiddle.net/rgthree/DWxf7/ and the CSS used:

.speech-bubble {
    position:relative;
    width: 320px;
    padding: 10px;
    margin: 3em;
    background-color:#FFF;
    color: #666;
    font: normal 12px "Segoe UI", Arial, Sans-serif;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 10px solid rgba(0,0,0,0.095);
}
.speech-bubble p {
    font-size: 1.25em;
}

.speech-bubble:before,
.speech-bubble:after {
    content: "\0020";
    display:block;
    position:absolute;
    top:-20px;  /* Offset top the height of the pointer's border-width */
    left:20px;
    z-index:2;
    width: 0;
    height: 0;
    overflow:hidden;
    border: solid 20px transparent;
    border-top: 0;
    border-bottom-color:#FFF;
}
.speech-bubble:before {
    top:-30px; /* Offset of pointer border-width + bubble border-width */
    z-index:1;
    border-bottom-color:rgba(0,0,0,0.095);
}
rgthree
  • 7,217
  • 17
  • 21