可自定义箭头样式的CSS3气泡提示框

时间：2021-05-08

一款基于纯CSS的气泡提示框，整个提示框由箭头和矩形框组成，并且气泡提示框的箭头可以有不同的方向。

在线预览源码下载

实现的代码。

css代码：

CSS Code复制内容到剪贴板
  • .arrow_box{
  • position:relative;
  • background:#88b7d5;
  • border:4pxsolid#c2e1f5;
  • }
  • .arrow_box:after,.arrow_box:before{
  • bottombottom:100%;
  • left:50%;
  • border:solidtransparent;
  • content:"";
  • height:0;
  • width:0;
  • position:absolute;
  • pointer-events:none;
  • }
  • .arrow_box:after{
  • border-color:rgba(136,183,213,0);[......]

  • 以上就是本文的全部内容，希望对大家的学习有所帮助。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章