CSS 消息气泡实现-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

CSS 消息气泡实现

简介: 消息气泡样式实现

前端页面开发中经常需要实现消息气泡样式,比如:

实际上上述两种效果实现起来,并不复杂,接下来我们就来实战一下。

1. 构建消息框

消息框主体很简单,一个div,设置一下背景颜色、border-radius等即可:

.message1,.message2 {
  width: 200px;
  height: 80px;
  margin: 100px auto;
  background-color: green;
  border-bottom-color:green;/*为了给after伪元素自动继承*/
  color: #fff;
  font-size: 12px;
  font-family: Arial;
  line-height: 18px;
  padding: 5px 12px 5px 12px;
  box-sizing: border-box;
  border-radius: 6px;
  position: relative;
  word-break: break-all;
}

<body>
  <div class="message1">
    Demos 代码演示、代码片段 - 读你,欢迎来到读你,http://dunizb.com/demo/
  </div>

  <div class="message2">
    Demos 代码演示、代码片段 - 读你,欢迎来到读你,http://dunizb.com/demo/
  </div>
</body>

2 三角形箭头

接下来我们实现一下图一中第一个消息气泡样式,这个样式相对简单:只需在消息框主体之前插入一个元素,然后再旋转45度即可,在现有元素之前插入其他元素首选before

.message1::before {
  content: '';
  width: 20px; 
  height: 20px;
  background-color: inherit;
  left: -10px; /*向左侧外部延伸箭头box的一半宽度*/
  position: absolute;
  transform: rotate(45deg); /*旋转45度*/
  top:50%; /*箭头在数值方向上居中*/
  margin-top: -5px;
}

3 圆弧型箭头

圆弧型箭头,稍微复杂些。由于涉及到弧度部分,可以考虑利用border来实现。首先我们通过after实现一个吸附在消息框右部的矩形框:

.message2::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  right: -24px;
  top: 0px;
  background-color: red; /*为显示需要*/
} 

前面已经说到,我们真正需要的是通过border来实现弧形效果,所以这里必然需要设置border,不过并不是所有方向都需要设置border,只需要设置底部和左部:

.message2::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -24px;
    top: 0px;
    background-color: red;
    border-width: 0 0 20px 20px;
    border-style: solid;
    border-left-color: blue;
    border-bottom-color: yellow;
} 

接下来再加上右下角弧度:

.message2::after {
  ...
  border-bottom-right-radius: 60px;
} 

此时可以看到,基本的雏形已经出来了,接下来就是重新设置颜色了。

.message2::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  right: -24px;
  top: 0px;
  border-width: 0 0 20px 20px;
  border-style: solid;
  border-left-color: transparent;
  border-bottom-color:inherit;
  border-bottom-right-radius: 60px;
} 

大功告成!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章