经常用到三角形提示框,用图片吧,大小框不定,所以,css自己写了,可设置宽高比,就可自适应了。

图形例子如下:

css代码如下

<style type="text/css">

        /* 基本样式 */
.tipleft {
background:#fff;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
position: relative;
width: 200px;
}
/**左边**/
.tipleft:before {
position: absolute;
display: inline-block;
border-top: 7px solid transparent;
border-right: 7px solid #eee;
border-bottom: 7px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
left: -8px;
top: 20px;
content: '';
}
/* 背景阴影*/
.tipleft:after { position: absolute;
display: inline-block;
border-top: 6px solid transparent;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: -6px;
top: 21px;
content: '';
} /**右边**/
.tipright{
background:#fff;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
position: relative;
width: 200px;
} .tipright:before {
position: absolute;
display: inline-block;
border-top: 7px solid transparent;
border-left: 7px solid #eee;
border-bottom: 7px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
right: -8px;
top: 20px;
content: '';
}
/* 背景阴影*/
.tipright:after { position: absolute;
display: inline-block;
border-top: 6px solid transparent;
border-left: 6px solid #fff;
border-bottom: 6px solid transparent;
right: -6px;
top: 21px;
content: '';
} /**上边**/
.tiptop{
background:#fff;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
position: relative;
width: 200px;
} .tiptop:before {
position: absolute;
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top:7px solid #111;
left:18px;
bottom: -7px;
content: ''; }
/* 背景阴影*/
.tiptop:after { position: absolute;
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #fff;
left:18px;
bottom: -7px;
content: '';
} /**下边**/
.tipbottom{
background:#fff;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
position: relative;
width: 200px;
} .tipbottom:before {
position: absolute;
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom:7px solid #111;
left:18px;
top: -7px;
content: ''; }
/* 背景阴影*/
.tipbottom:after { position: absolute;
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #fff;
left:18px;
top:-7px;
content: '';
} /****第二种方法*/
#sanjiaotip { text-indent: 2em; box-shadow: 0px 0px 10px #999; padding: 10px; font-size: 12px; line-height: 1.5; border-radius: 5px; width: 250px; position: relative;
border: 1px solid #CCC;
margin-left:20px;
} #sanjiaotip span { position: absolute; left: 25px; height: 0px; width: 0px; } /*右部小三角实现样式开始*/ #sanjiaotip span.right { background: #FFF; border-width: 1px; width: 16px; height: 16px; border-color: #CCC #CCC transparent transparent; border-style: solid solid dashed dashed; left: 270px; top: 30px; border-radius: 0 0 100% 0;/*这里radius的值不要选取绝对值因为在放大或者缩小的过程中会产生封不住口的现象*/ line-height:; box-shadow: 5px 0 10px #aaa; }
#sanjiaotip span.left { background: #FFF; border-width: 1px; width: 16px; height: 16px; border-color:#CCC transparent transparent #CCC ; border-style:solid dashed dashed solid ; left:-18px; top: 30px; border-radius: 0 0 0 100%;/*这里radius的值不要选取绝对值因为在放大或者缩小的过程中会产生封不住口的现象*/ line-height:; box-shadow: 0 1px 0 #aaa; }
</style>

html代码如下:

  <h3>方法一</h3>

    <div class="tiptop">
上面
</div>
<br>
<div class="tipleft">
左边
</div>
<br>
<div class="tipright">
右边
</div>
<br>
<div class="tipbottom">
下面
</div>
<br>
<h3>方法二</h3>
<div id="sanjiaotip">
<span class="right"></span><span class="left"></span>
<p>测试测试测试测试测试测试测试测试测试测试测试测试</p>
</div>

  希望对大家有用。

纯css3的上下左右提示框几种方法的更多相关文章

  1. 有关js弹出提示框几种方法

    1直接提示只有确定功能的提示框 只显示提示信息 alert(“提示信息”); alert ();的参数只有一个就是提示信息,无返回值 2 弹出输入框让你输入内容 prompt() ; 有两个参数:第一 ...

  2. 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  3. CSS3实现Tooltip提示框飞入飞出动画

    原文:CSS3实现Tooltip提示框飞入飞出动画 我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观 ...

  4. IE下实现类似CSS3 text-shadow文字阴影的几种方法

    IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...

  5. 纯css来实现提示框

    用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...

  6. 纯CSS实现tooltip提示框,CSS箭头及形状

    本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...

  7. 纯CSS制作冒泡提示框

    来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...

  8. PL/SQL Dev连接Oracle弹出空白提示框的解决方法分享

    第一次安装Oracle,装在虚拟机中,用PL/SQL Dev连接远程数据库的时候老是弹出空白提示框,网上找了很久,解决方法也很多,可是就是没法解决我这种情况的. 出现这种问题,解决方法大概有这几种: ...

  9. IIS访问PHP文件时,弹出用户名和密码提示框的解决方法

    找了一圈,以下的方法解决了IIS访问PHP弹用户名和密码提示框问题. 解决方法:给PHP安装目录everyone读取权限 这样不知道会不会出现安全问题,请大家谨慎.

随机推荐

  1. iso8583报文自学笔记

    一.8583报文组成 TPDU 报文头 应用数据 ISO8583 Msg ID 目的 地址 源地址 应用类别定义 软件 总版本号 终端 状态 处理 要求 保留使用(软件分版本号) 交易数据 60H N ...

  2. Balanced Lineup 倍增思想到ST表RMQ

      Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 36864   Accepted: 172 ...

  3. TCP/IP协议原理与应用笔记22:静态和动态路由选择

    1. 静态路由选择: Static routing 管理员手工设置 管理员手动更新 不能保证路由的一致性和及时性 管理性强 没有路由开销 小型.变化缓慢网络 2. 动态路由选择 Dynamic rou ...

  4. NODE编程(四)--构建Node Web程序2

    四.提供静态文件服务 1.创建一个静态文件服务器 __dirname ,取值是该文件所在咋目录路径.分散在不同目录中的文件可以有不同的值. /** * 最进本的ReadStream静态文件服务器 */ ...

  5. sift算法中翻译的第11页中比值问题

    没下载下来... http://download.csdn.net/detail/shwaicy1314/7320695 原文翻译.应该是 2004年lowe写的吧 第八页 图C展示的 是小于0.03 ...

  6. linux ----虚拟机无法与本地机通信

    1.以前能正常通信,电脑重启或休眠唤醒后, 虚拟机centos无法与本地主机通信,但能ping通同一局域网的其他主机,也能与外网通信 故障原因: 未找到 解决办法: 1.重启电脑 2.重启xshell ...

  7. xe5 android sample 中的 SimpleList 是怎样绑定的

    C:\Users\Public\Documents\RAD Studio\12.0\Samples\FireMonkeyMobile 例子中的绑定方式如下图: 1.拖拽一个listview到界面上,然 ...

  8. CF Soldier and Badges (贪心)

    Soldier and Badges time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  9. Python之随机数

    import numpy as np list = range(3) # 0 1 2 np.random.shuffle(list)#2 1 3,打乱了list import randomprint ...

  10. MVC Action,Service中筛选int 和list<int>

    action: public ActionResult DeleteByID(int id) { this.MessageService.DeleteMailTemplate(id); var fro ...