工具提示/语音气泡，渐变背景和顶部中心的箭头 [英] Tooltip/Speech bubble with a gradient background and arrow at top-center
本文介绍了工具提示/语音气泡，渐变背景和顶部中心的箭头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这种形状：
，我想知道是否可以使用CSS3创建它。
HTML ：
=cafeDialog caspSearchstyle =>< div data-title =Searchrole =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,8091）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，色停止（8％，rgba（67,74,80,0.91）），停止色素（91％，rgba（54,58,61,0.96）），色停（100％，rgba ，85，0.9）））;
/ * Chrome，Safari4 + * /
背景：-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（到底部，rgba（128,144,152,0.9）0％，rgba（67,74,80,8091）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;
}
我遇到三角形，因为它需要与透明渐变和
$
解决方案 b $ b
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;
显示：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>您的内容。< / p>
小提琴
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 .
解决方案
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
这篇关于工具提示/语音气泡，渐变背景和顶部中心的箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
