纯CSS3实现聊天框小尖角、气泡效果、空心效果

纯CSS3实现聊天框小尖角、气泡效果、空心效果

 

下面是实现用css3制作的聊天气泡的效果,原理和效果都在代码里面,大家有兴趣的拿去测试吧!免去了使用图片的繁琐和不便修改的问题, 效果如下图所示:

 

<!DOCTYPE html PUBLIC?"-//W3C//DTD XHTML 1.0 Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
????<title></title>
????<style type="text/css">
????????.tag
????????{
????????????width: 300px;
????????????height: 100px;
????????????border: 5px solid #09F;
????????????position: relative;
????????}
????????.tag em
????????{
????????????display: block;
????????????border-width: 20px;
????????????position: absolute;
????????????bottom: -40px;
????????????left: 100px;
????????????border-style: solid dashed dashed;
????????????border-color: #09F transparent transparent;
????????????font-size: 0;
????????????line-height: 0;
????????}
????????.tag span
????????{
????????????display: block;
????????????border-width: 20px;
????????????position: absolute;
????????????bottom: -33px;
????????????left: 100px;
????????????border-style: solid dashed dashed;
????????????border-color: #FFF transparent transparent;
????????????font-size: 0;
????????????line-height: 0;
????????}
????</style>
</head>
<body>
????<div?class="tag">
????????<em></em>CSS气泡框实现
????</div>
????<div?class="tag"?style="margin-top: 100px">
????????<em></em><span></span>CSS气泡框实现
????</div>
</body>
</html>
未经允许不得转载:小月博客 » 纯CSS3实现聊天框小尖角、气泡效果、空心效果
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(0) 打赏

评论6

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #3
    时间飞快,转眼年中就要到来,祝你天天愉快!
    www.yihuanghou.com2017-04-21 7:46:34回复
    • 谢谢 哦
      小月2017-04-21 10:02:03回复
  2. #2
    不是
    我是啊2017-04-18 23:34:46回复
    • 你是啊,你好
      小月2017-04-19 9:29:33回复
  3. #1
    厉害了我滴月
    小月牛逼2017-04-18 17:10:03回复
    • 吓到宝宝了,赔钱
      小月2017-04-18 17:55:22回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏