经常用到三角形提示框,用图片吧,大小框不定,所以,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. selenium python 定位一组对象

    为什么定位一组对象? 定位一组对象的思想    在定位一组对象的过程中我们如何实现?以前的都是通过具体的对象定位,那么定位一组我们就需要通过css来定位   在单个定位对象中使用的是find_elem ...

  2. selenium 一个简单的流程

    在整个自动化测试过程中需要分为及部分:      1.初始化      2.结束      3.异常处理      4.截图      5.对弹窗的处理      6.测试用例   整个过程中需要包括 ...

  3. iOS H5 容器的一些探究(一):UIWebView 和 WKWebView 的比较和选择

    来源:景铭巴巴 链接:http://www.jianshu.com/p/84a6b1ac974a 一.Native开发中为什么需要H5容器 Native开发原生应用是手机操作系统厂商(目前主要是苹果的 ...

  4. C#获取进程的主窗口句柄的实现方法

    通过调用Win32 API实现. public class User32API { private static Hashtable processWnd = null; public delegat ...

  5. XACML-PolicySet与request结构简介

    本文由@呆代待殆原创,转载请注明出处. 一.PolicySet的结构 PolicySet 的基本嵌套结构如上图所示,下面让我们一个一个来说明. PolicySet:XACML策略架构的顶层元素,由Po ...

  6. A Multipart Series on Grids in ASP.NET MVC

    A Multipart Series on Grids in ASP.NET MVC Displaying a grid of data is one of the most common tasks ...

  7. react-redux 学习笔记

    react 是 view 层的一个框架,负责展示数据:redux 控制数据流动,把数据存在唯一的 store 里,通过 action 来触发事件,reducer 来根据事件处理数据. redux 在通 ...

  8. PHP将解析xml变为数组方法

    最近想要做一个插件机制,需要用到xml,在解析xml时候需要转换为数组,特意记录一个此种解析方式 xml文件 <?xml version="1.0" encoding=&qu ...

  9. Umbraco(3) - CSS & Javascript(翻译文档)

    原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...

  10. Kinect For Windows V2开发日志九:侦测并绘制人体骨架

    简介 在上一篇<侦测.追踪人体骨架>里,介绍了关节点的使用办法,这一篇记录将关节点与OpenCV结合的绘图方法. 代码 #include <iostream> #include ...