起首我们来看一下我们须要制造的对话框的结果
接下来我们就来看看这几种对话气泡的完成要领
我们来看一下怎样完成箭头向左的对话气泡
我们须要先来制造一个框架
代码以下
HTML代码
<div class="balloon-left"> 左侧 </div>
CSS代码
.balloon-left { position: relative; display: inline-block; padding: 0 15px; width: auto; min-width: 150px; height: 40px; line-height: 34px; text-align: center; background: #44FF44; border: 3px solid #000000; z-index: 0; }
接着,我们运用:before来制造箭头部份,用:after来制造箭头的边
CSS代码
.balloon-left:before { border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #44FF44 transparent transparent; content: ""; position: absolute; top: 50%; left: -8px; margin-top: -9px; display: block; width: 0px; height: 0px; z-index: 0; } .balloon-left:after { border-style: solid; border-width: 11px 11px 11px 0; border-color: transparent #000000 transparent transparent; content: ""; position: absolute; top: 50%; left: -12px; margin-top: -10px; display: block; width: 0px; height: 0px; z-index: -1; }
运转结果入下所示
如许就完成了第一个对话气泡
下面我们就来依据上述要领来制造箭头向右的对话气泡
代码以下
HTML代码
<div class="balloon-right"> 右侧 </div>
CSS代码
.balloon-right { position: relative; display: inline-block; padding: 0 15px; width: auto; min-width: 150px; height: 40px; line-height: 34px; text-align: center; background: #44FF44; border: 3px solid #000000; z-index: 0; } .balloon-right:before { border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #44FF44; content: ""; position: absolute; top: 50%; right: -8px; margin-top: -9px; display: block; width: 0px; height: 0px; z-index: 0; } .balloon-right:after { border-style: solid; border-width: 11px 0 11px 11px; border-color: transparent transparent transparent #000000; content: ""; position: absolute; top: 50%; right: -12px; margin-top: -10px; display: block; width: 0px; height: 0px; z-index: -1; }
运转上述代码的结果以下所示:是一个向右的气泡
末了我们来讲箭头向左和向右的对话气泡
我们须要用到border-radius属性让气泡变得油滑
代码以下
HTML代码
<div class="balloon-top">向上</div> <div class="balloon-bottom">向下</div>
CSS代码
.balloon-top { position: relative; display: inline-block; padding: 0 15px; width: auto; min-width: 150px; height: 40px; line-height: 32px; text-align: center; background: #44FF44; border: 3px solid #000000; z-index: 0; border-radius: 60%; } .balloon-top:before { border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #44FF44 transparent; content: ""; position: absolute; top: -8px; left: 50%; margin-left: -9px; display: block; width: 0px; height: 0px; z-index: 0; } .balloon-top:after { border-style: solid; border-width: 0 11px 11px 11px; border-color: transparent transparent #000000 transparent; content: ""; position: absolute; top: -12px; left: 50%; margin-left: -10px; display: block; width: 0px; height: 0px; z-index: -1; } .balloon-bottom { position: relative; display: inline-block; padding: 0 15px; width: auto; min-width: 150px; height: 40px; line-height: 34px; text-align: center; background-color: #44FF44; border: 3px solid #000000; z-index: 0; border-radius: 60%; } .balloon-bottom:before { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -9px; width: 0px; height: 0px; border-style: solid; border-width: 10px 10px 0 10px; border-color: #44FF44 transparent transparent transparent; z-index: 0; } .balloon-bottom:after { border-style: solid; border-width: 11px 11px 0 11px; border-color: #000000 transparent transparent transparent; content: ""; position: absolute; bottom: -12px; left: 50%; margin-left: -10px; width: 0px; height: 0px; z-index: -1; }
结果以下所示
总结
CSS部份有点庞杂,但你能够依据以上示例经由过程自定义色彩和外形来制造各种类型的对话框气泡。
本篇文章到这里就悉数完毕了,更多精彩内容人人能够移步到ki4网的CSS视频教程栏目进一步的进修!!!
以上就是怎样运用CSS制造对话框气泡的细致内容,更多请关注ki4网别的相干文章!