/*提示框容器-上三角形*/
.tip-top {
font-family: SourceHanSansCN-Normal;
font-size: 0.22rem;
line-height: 0.36rem;
letter-spacing: 0rem;
color: #999999;
margin-top: 0.19rem;
width: 6.91rem;
padding: 0.11rem 0.19rem;
background-color: #ffffff;
box-shadow: 0rem 0rem 0.045rem 0.005rem rgba(150, 150, 150, 0.15);
position: relative;
background-color: #FFF;
/*设置圆角*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/*生成2个叠加的三角形*/
.tip-top:before,
.tip-top:after {
content: "";
display: block;
border-width: 0.14rem;
position: absolute;
top: -0.3rem;
left: 0.2rem;
border-style: solid dashed dashed solid;
border-color: transparent transparent #99999930 transparent;
font-size: 0;
line-height: 0;
}
/*将上面的三角形颜色设置和容器背景色相同*/
.tip-top:after {
top: -0.27rem;
border-color: transparent transparent #FFF transparent;
}
手机端常用的有一个小角的提示框
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 背景 现有的项目中,App的升级率不高,虽然中间存在多个强升版本,但是依旧大量存在低版本的用户。轻(比如小bug)...
- 常用报表的插件 echarts.js highcharts.js(已用) 常用对话框的插件: jbox.js ...
- 近期项目进行优化,自己实现了一下一些交互等待处理,以及一些提示框,实现效果如下,一般都能满足常用需求了。希望对大家...