用纯css3和html制作泡沫对话框实现代码

现在，泡沫对话框是一种比较流行的趋势，一般都是用html和javascript，和或者图片来实现，今天用纯css3和html来实现一些基本的简单的泡沫对话框

html代码如下：

复制代码 代码如下:

<div class=”content”>

<h2>the basic bubble variants</h2>

<p class=”triangle-isosceles”>this only needs one html element.</p>

<p class=”triangle-isosceles top”>for example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>

<p class=”triangle-isosceles left”>but it could be any element you want.</p>

<p class=”triangle-isosceles right”>the entire appearance is created only with css.</p>

<p class=”triangle-right”>this only needs one html element.</p>

<p class=”triangle-right top”>for example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>

<p class=”triangle-right left”>but it could be any element you want.</p>

<p class=”triangle-right right”>the entire appearance is created only with css.</p>

</div>

css代码如下：

复制代码 代码如下:

body {

padding:0;

margin:0;

font:1em/1.4 cambria, georgia, sans-rif;

color:#333;

background:#fff;

}

a:link, a:visited {

border-bottom:1px solid #c55500;

text-decoration:none;

color:#c55500;

}

a:visited {

b录音艺术order-bottom:1px solid #730800;

color:#730800;

}

a:hover, a:focus, a:active {

border:0;

color:#fff;

background:#c55500;

}

a:visited:hover, a:visited:focus, a:visited:active {

color:#fff;

background:#730800;

}

h2 {

margin:0.5em 0 1.5em;

font-size:1.25em;

font-weight:normal;

font-style:italic;

text-align:center;

}

p {

margin:1em 0;

}

.content h2 {

margin:2em 0 0.75em;

font-size:2em;

font-weight:bold;

font-style:normal;

text-align:left;

}

.content {

width:500p慎重的近义词x;

padding:0 0 50px;

margin:0 auto;

position:relative;

z-index:1;

}

.triangle-isosceles {

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);

filter:progid:dximagetransform.microsoft.gradient(gradinettype=0, startcolorstr=”#f9d835″, endcolorstr=”#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);

filter:progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=”#f3961c”, endcolorstr=”#f9d835″);

}

.triangle-isosceles.left {

margin-left:50px;

background:#f3961c;

}

.triangle-isosceles.right {

margin-right:50px;

background:#f3961c;

}

.triangle-isosceles:after {

content:””;

position:absolute;

left:50px;

bottom:-15px;

border-width:15px 15px 0;

border-style:solid;

border-color:#f3961c transparent;

display:block;

width:0;

}

.triangle-isosceles.top:after {

top:-15px;

bottom:auto;

left:auto;

right:50px;

border-width:0 15px 15px;

border-color:#f3961c transparent;

}

.triangle-isosceles.left:after {

top:16px;

left:-50px;

bottom:auto;

border-width:10px 50px 10px 0;

border-color:transparent #f3961c;

}

.triangle-isosceles.right:after {

top:16px;

right:-50px;

bottom:auto;

border-width:10px 0 10px 50px;

border-color:transparent #f39a1c;

left:auto;

}

.triangle-right {

position:relative;

padding:15px;

margin:1em 0 3em;

color:#fff;

background:#075698;

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:-ms-linear-gradient(#2e88c4, #075698);

filter:progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=”#2e88c4″, endcolorstr=”#075698″);

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

}

.triangle-right.t项的意思op {

background:-webkit-gradient(linear, 2020年教师资格证考试答案0 0, 0 100%, from(#075698), to(#2e88c4));

background:-moz-linear-gradient(#075698, #2e88c4);

background:-o-l二十四式太极拳图解inear-gradient(#075698, #2e88c4);

background:linear-gradient(#075698, #2e88c4);

filter:progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=”#075698″, endcolorstr=”#2e88c4″);

}

.triangle-right.left {

margin-left:40px;

background:#075698;

}

.triangle-right.right {

margin-right:40px;

background:#075698;

}

.triangle-right:after {

content:””;

position:absolute;

bottom:-20px;

left:50px;

border-width:20px 0 0 20px;

border-style:solid;

border-color:#075698 transparent;

display:block;

width:0;

height:0;

}

.triangle-right.left:after {

top:16px;

left:-40px;

bottom:auto;

border-width:15px 40px 0 0;

border-color:transparent #075698;

}

.triangle-right.top:after {

top:-20px;

right:50px;

bottom:auto;

left:auto;

right:50px;

border-width:20px 20px 0 0;

border-color:transparent #075698;

}

.triangle-right.right:after {

top:16px;

right:-40px;

bottom:auto;

left:auto;

border-width:15px 0 0px 40px;

border-color:transparent #075698;

}

支持的浏览器有：firefox 3.5+, safari 4+, chrome 4+, opera 10+, ie8+.

预览效果如下：

在firefox14.0中预览的效果：

在chrome10.0中预览效果

在ie9中预览效果：

在ie8中预览的效果：