Check out the bubble below - no graphics were used and it is cross-platform compatible.
This version comes out of Opera for Windows. However, it works well in Safari, Firefox and IE 9. The one exception is that the bubble in ie does not have the graduated fill. It is just straight blue in color.
Here is the code (thanks again to Nic) that worked for me:
HTML
<blockquote class="bubble-left">
<p>"Knowledge is knowing a tomato is a fruit; Wisdom is not putting it in a fruit salad."</p>
</blockquote>
<p>Brian Gerald O’Driscoll</p>
CSS
.bubble-right
{
position: relative;
padding: 15px 30px;
margin: 20px 20px 20px 20px;
color:#fff;
background:#075698;
/* css3 */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
background:-moz-linear-gradient(#2e88c4, #075698);
background:-o-linear-gradient(#2e88c4, #075698);
background:linear-gradient(#2e88c4, #075698);
-webkit-border-top-left-radius: 25px 50px;
-webkit-border-top-right-radius: 25px 50px;
-webkit-border-bottom-right-radius: 25px 50px;
-webkit-border-bottom-left-radius: 25px 50px;
-moz-border-radius: 25px / 50px;
border-radius: 25px / 50px;
}
.bubble-right p
{
color: White;
}
.bubble-right + p {margin:10px 180px 2em 0; text-align:right; font-style:italic;}
/* creates the larger triangle */
.bubble-right:before {
content:"";
position:absolute;
bottom:-30px;
right:80px;
border-width:0 0 30px 50px;
border-style:solid;
border-color:transparent #075698;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.bubble-right:after {
content:"";
position:absolute;
bottom:-30px;
right:110px;
border-width:0 0 30px 20px;
border-style:solid;
border-color:transparent #fff;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
I have to give Nicolas Galapher a lot of credit for his investigation and write up into how to use CSS pseudo elements. I also have to give the W3C Committee credit for their fore site on coming up with this capability.
Here is a quick list of the Pseudo Elements defined by W3C.
Selector | Example | Example description |
---|---|---|
:link | a:link | Selects all unvisited links |
:visited | a:visited | Selects all visited links |
:active | a:active | Selects the active link |
:hover | a:hover | Selects links on mouse over |
:focus | input:focus | Selects the input element which has focus |
:first-letter | p:first-letter | Selects the first letter of every <p> element |
:first-line | p:first-line | Selects the first line of every <p> element |
:first-child | p:first-child | Selects every <p> elements that is the first child of its parent |
:before | p:before | Insert content before every <p> element |
:after | p:after | Insert content after every <p> element |
:lang(language) | p:lang(it) | Selects every <p> element with a lang attribute value starting with "it" |