Tooltip/Speech bubble with a gradient background and arrow at top-center - html

Question

I have this shape:
and I was wondering if its possible to create it with CSS3.
This is what I have so far (click for fiddle):
HTML:
<div id="cafeDialog" role="dialog" class="cafeDialog caspSearch" style="">
<div data-title="Search" role="main">
<div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.caspSearch {
border: 1px solid black;
background: black;
background: -moz-linear-gradient(top, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(128, 144, 152, 0.9)), color-stop(8%, rgba(67, 74, 80, 0.91)), color-stop(91%, rgba(54, 58, 61, 0.96)), color-stop(100%, rgba(74, 81, 85, 0.9)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
/* W3C */
width: 500px;
height: 300px;
border-radius: 10px;
padding: 0 !important;
position:relative;
top: 30px;
}
.caspSearch:before {
content:'';
width: 0;
height: 0;
display: block;
position: absolute;
border-bottom: 50px solid white;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
I'm struggling with the triangle since it needs to be with transparent gradient and the black border needs to wrap it .

Answer 1

Is this what you are looking for?
CSS
.triangle-isosceles {
height: 200px;
width: 300px;
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.triangle-isosceles.top {
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
background:-moz-linear-gradient(#f3961c, #f9d835);
background:-o-linear-gradient(#f3961c, #f9d835);
background:linear-gradient(#f3961c, #f9d835);
}
.triangle-isosceles:after {
content:"";
position:absolute;
bottom:-15px;
left:50px;
border-width:15px 15px 0;
border-style:solid;
border-color:#f3961c transparent;
display:block;
width:0;
}
.triangle-isosceles.top:after {
top:-15px;
right:50px;
bottom:auto;
left:auto;
border-width:0 15px 15px;
border-color:#f3961c transparent;
}
HTML
<p class="triangle-isosceles top">Your content.</p>
The Fiddle
http://jsfiddle.net/sjccN/4/

Answer 2

I made a sample for you... just add your shadows and such to this and your set :)
http://jsfiddle.net/BNgTh/
#talkbubble {
width: 120px;
height: 80px;
margin-top:20px;
margin-left:40px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
top: -20px;
left:40%;
width: 0;
height: 0;
border-bottom: 26px solid red;
border-right: 13px solid transparent;
border-left: 13px solid transparent;
}
Change the top value in #talkbubble:before to make it smaller as you wish too.