如何用CSS实现带三角箭头的气泡

原创
2017/07/02 00:06
阅读数 1.4K
用纯CSS实现气泡图教程如下:
1.在html中定义一个元素,如div
<div class="note">
    秀出我的气泡
</div>
2.添加CSS样式
.note {
  width: 207px;
  min-height: 40px;
  border: solid 1px #EEEEEE;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.10);
  border-radius: 2px;
  background-color: #FFFFFF;
  font-family: STHeitiSC-Light;
  font-size: 12px;
  color: #666666;
  letter-spacing: 0.5px;
  line-height: 12px;
}

.note:before {
  content: '';
  border-top: 9px solid transparent; /*方框上部分背景颜色为透明*/
  border-bottom: 9px solid transparent; /*方框下部分背景为透明*/
  border-left: 9px solid #EEEEEE; /*箭头背景颜色*/
  position: absolute; /*绝对定位1*/
  top: 10px; /*距离顶部位置偏移量2*/
  right: -9px; /*距离左边位置偏移量3*/
}

.note:after {
  content: '';
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid #FFFFFF; /*箭头背景颜色,覆盖前面的#eee颜色,使其颜色与整体颜色一致*/
  position: absolute;
  top: 10px;
  right: -7px;
}
3.气泡出来了
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部