利用CSS中的:after、: before制作的边三角提示框
小颖昨天分享了一篇参考bootstrap中的popover.js的css画消息弹框今天给大家再分享一篇使用:before和:after伪元素画消息弹框的CSS。
画出来是介个酱紫的:
有没有觉得画的萌萌哒,嘻嘻
不贫了,我们一起看代码吧!啦啦啦啦啦啦啦
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.arrow_box {
position: relative;
border: 1px solid #c2e1f5;
padding: 10px;
width: 200px;
height: 100px;
border-radius: 6px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
margin: 50px;
float: left;
} .arrow_box:before,
.arrow_box:after {
position: absolute;
display: block;
width: 0;
height: 0;
border: solid transparent;
pointer-events: none;
content: "";
border-color: rgba(136, 183, 213, 0);
} .arrow_box.down:before {
border-bottom-color: #c2e1f5;
border-width: 12px;
left: 49%;
margin-left: -10px;
bottom: 100%;
} .arrow_box.down:after {
border-bottom-color: #fff;
border-width: 10px;
left: 50%;
margin-left: -10px;
bottom: 100%;
} .arrow_box.up:before {
border-top-color: #c2e1f5;
border-width: 12px;
left: 49%;
margin-left: -10px;
top: 100%;
} .arrow_box.up:after {
border-top-color: #fff;
border-width: 10px;
left: 50%;
margin-left: -10px;
top: 100%;
} .arrow_box.left:before {
border-left-color: #c2e1f5;
border-width: 13px;
top: 38%;
left: 100%;
} .arrow_box.left:after {
border-left-color: #fff;
border-width: 10px;
top: 41%;
left: 100%;
} .arrow_box.right:before {
border-right-color: #c2e1f5;
border-width: 13px;
top: 38%;
right: 100%;
} .arrow_box.right:after {
border-right-color: #fff;
border-width: 10px;
top: 41%;
right: 100%;
}
</style>
</head> <body>
<div class="popovers-body">
<div class="arrow_box down"></div>
<div class="arrow_box up"></div>
<div class="arrow_box left"></div>
<div class="arrow_box right"></div>
</div>
</body> </html>
参考网站:css after before制作的边三角提示框
利用CSS中的:after、: before制作的边三角提示框的更多相关文章
- 如何利用CSS中的ime-mode用来控制页面上文本框中的全角/半角输入
css 之 ime-mode语法:ime-mode : auto | active | inactive | disabled取值:auto : 默认值.不影响ime的状态.与不指定 ime-mode ...
- 利用css中的border生成三角,兼容包括IE6的主流浏览器
1.生成四个不同颜色方向的梯形 #ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #3 ...
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- .Net中使用无闪刷新控件时提示框不显示
今天做提示框的时候一直不显示,让我郁闷好久,晚上吃饭的时候问了同事一下,他给了一个思路, 他说可能是因为由于页面中的无闪刷新导致的结果:百度了一下真找到了解决方法 在页面中存在无闪刷新控件的时候提示框 ...
- 利用css中的background-position定位图片
今天遇到一个新鲜的问题,如果定位一个设计师设计的图片.例子如下: 实现只显示每一个图标,主要是将图片等分,然后通过background-position来控制,注意等分的时候要减一,第一个百分比表示x ...
- 巧妙利用selenium中的JS操作来处理特殊的文本框
在使用selenium对页面进行相关操作时,有时候会遇到以下三种情况: 1.日期框:无法直接输入文本,必须要选择某一天的日期并点击才会填入文本框: 2.检索框:可以直接输入文本,但必须要点击根据输入的 ...
- 利用CSS 修改input=radio的默认样式(改成选择框)
html部分: <input id="item2" type="radio" name="item"> <label fo ...
- css中计数器的实现-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485533&idx=1&sn=e88dc5fffa6 ...
- css中position:fixed实现div居中
上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...
随机推荐
- 使用struct处理二进制
有的时候需要用python处理二进制数据,比如,存取文件.socket操作时.这时候,可以使用python的struct模块来完成. struct模块中最重要的三个函数是pack(), unpack( ...
- Linux CentOS 配置JDK环境
一.下载JDK 下载JDK的方式有两种: 1.Linux中使用wget下载 1.使用命令安装wget yum install wget 2.下载 wget 'http://download.oracl ...
- .NET Core的日志[4]:将日志写入EventLog
面向Windows的编程人员应该不会对Event Log感到陌生,以至于很多人提到日志,首先想到的就是EventLog.EventLog不仅仅记录了Windows系统自身针对各种事件的日志,我们的应用 ...
- 算法与数据结构(七) AOV网的拓扑排序
今天博客的内容依然与图有关,今天博客的主题是关于拓扑排序的.拓扑排序是基于AOV网的,关于AOV网的概念,我想引用下方这句话来介绍: AOV网:在现代化管理中,人们常用有向图来描述和分析一项工程的计划 ...
- 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- (翻译)FIFO In Hardware
翻译一些自己觉得有价值的材料,工作中碰到英语大多数是读,基本没有写或者翻的,翻得不好不到位的敬请指摘. 同时也附原文以供参考. http://electronics.stackexchange.com ...
- Html 制作相册
本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局 调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化 ...
- 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践
提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...
- linux下 lvm 磁盘扩容
打算给系统装一个oracle,发现磁盘空间不足.在安装系统的时候我选择的是自动分区,系统就会自动以LVM的方式分区.为了保证系统后期的可用性,建议所有新系统安装都采用LVM,之后生产上的设备我也打算这 ...
- [DeviceOne开发]-手势动画示例分享
一.简介 这是iOS下的效果,android下完全一致.通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手 ...