纯 CSS 带方向箭头消息提示框
2023-06-13 09:15:39 时间
warning: 这篇文章距离上次修改已过225天,其中的内容可能已经有所变动。
这是一个纯CSS写的带方向箭头的消息提示框,支持左上、右上、左下、右下、纯左、纯右五种方向箭头,对应的Class分别为 ark-poptip-arrow-a/b/c/d/e/f
,效果图如下:
效果图
CSS部分
.ark-poptip{ position: absolute; color: #db7c22; z-index: 101; line-height: 1.5; zoom: 1; }
.ark-poptip-shadow{ background-color: rgba(229,169,107,0.15); FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#26e5a96b,endColorstr=#26e5a96b); border-radius: 2px; padding: 2px; zoom: 1; _display: inline; }
.ark-poptip-container{ position: relative; background-color: #fffcef; border: 1px solid #ffbb76; border-radius: 2px; padding: 5px 22px 5px 10px; zoom: 1; _display: inline; }
.ark-poptip:after,.ark-poptip-shadow:after,.ark-poptip-container:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.ark-poptip a.ark-poptip-close{ position: absolute; right: 3px; top: 3px; border: 1px solid #ffc891; text-decoration: none; border-radius: 3px; width: 12px; height: 12px; font-family: tahoma; color: #dd7e00; line-height: 10px; line-height: 10px\0; *line-height: 12px; text-align: center; font-size: 14px; background: #ffd7af; background: -webkit-gradient(linear,left top,left bottom,from(#fff0e1),to(#ffe7cd)); background: -moz-linear-gradient(top,#fff0e1,#ffe7cd); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF0E1',endColorstr='#FFE7CD'); background: -o-linear-gradient(top,#fff0e1,#ffe7cd); background: linear-gradient(top,#fff0e1,#ffe7cd); overflow: hidden; }
.ark-poptip a.ark-poptip-close:hover{ border: 1px solid #ffb24c; text-decoration: none; color: #dd7e00; background: #ffd7af; background: -webkit-gradient(linear,left top,left bottom,from(#ffe5ca),to(#ffcc98)); background: -moz-linear-gradient(top,#ffe5ca,#ffcc98); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFE5CA',endColorstr='#FFCC98'); background: -o-linear-gradient(top,#ffe5ca,#ffcc98); background: linear-gradient(top,#ffe5ca,#ffcc98); }
.ark-poptip-arrow,.ark-poptip-arrow em,.ark-poptip-arrow span{ position: absolute; font-size: 14px; font-family: SimSun,Hiragino Sans GB; font-style: normal; line-height: 21px; z-index: 10; *zoom: 1; }
.ark-poptip-arrow em{ color: #ffbb76; }
.ark-poptip-arrow span{ color: #fffcef; top: 0; left: 0; }
.ark-poptip-arrow-a{ left: 14px; top: -10px; top: -9px\0; }
.ark-poptip-arrow-a em{ top: -1px; left: 0; }
.ark-poptip-arrow-b{ right: 28px; top: -10px; top: -9px\0; }
.ark-poptip-arrow-b em{ top: -1px; left: 0; }
.ark-poptip-arrow-c{ left: 14px; bottom: 10px; }
.ark-poptip-arrow-c em{ top: 1px; left: 0; }
.ark-poptip-arrow-d{ right: 28px; bottom: 10px; }
.ark-poptip-arrow-d em{ top: 1px; left: 0; }
.ark-poptip-arrow-e{ top: 6px; left: -6px; }
.ark-poptip-arrow-e em{ top: 0; left: -1px; }
.ark-poptip-arrow-f{ top: 6px; right: 7px; }
.ark-poptip-arrow-f em { top: 0; left: 1px; }
.ark-poptip-content{ float: none; display: inline; *zoom: 1; }
.ark-poptip-content:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
:root .ark-poptip-shadow{ FILTER: none\9; }
HTM部分
<div class="ark-poptip" style="top: 10px;">
<div class="ark-poptip-shadow">
<div class="ark-poptip-container">
<div class="ark-poptip-arrow ark-poptip-arrow-a">
*◆*<span>◆</span>
</div>
<div class="ark-poptip-content">欢迎访问技术写真 の 若海 & 尐岢 http://www.rehiy.com</div>
</div>
</div>
</div>
源码下载 css-tips
相关文章
- css 更改所有text,CSS之cssText「建议收藏」
- 在html中加入外部css样式,如何引入CSS样式表?
- 关于MQ的几件小事(四)如何保证消息不丢失
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- 【CSS教程】紫色渐变登陆布局html+css代码
- WPF 通过 RawInput 获取触摸消息
- WordPress 技巧:在注册页面显示自定义消息
- 配置 Spring Cloud Bus 的消息代理
- Linux内核消息队列:实现核心间通信(linux内核消息队列)
- java spring boot消息队列 RabbitMQ详解编程语言
- RocketMQ——事务消息详解编程语言
- 规则先行,加速推动5G消息高质量发展
- 以Redis为基础的消息系统(消息系统redis)
- Ubuntu Touch 迎来同步/消息/电话/浏览器等方面的改进
- 设计一个百万级的消息推送系统
- 延迟消息处理:使用Redis实现延迟队列(延迟队列redis)
- 深度解析:Linux 消息队列的工作原理及优缺点(linux消息队列原理)
- Redis 实现消息持久化机制的实践方法(redis消息持久化)
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- 借助Redis实现及时消息通道订阅(redis通道订阅)
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- 《Apache RocketMQ用户指南》之有序的消息示例
- 简单的加密css地址防止别人下载你的CSS文件的方法
- juqery学习之六CSS--css、位置、宽高
- php压缩多个CSS为一个css的代码并缓存
- 解析php做推送服务端实现ios消息推送