CSS3 提示框带边角popover

jilong-liang

浏览: 470775 次
性别:
来自: 广州

最近访客更多访客>>

word5

qq243348167

tian_yu_bing

追逐什么

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css3

test1.html

<!DOCTYPE html>
<html>
<head>
<title>test1.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">


<style type="text/css">
/*多个class是相同的用，分开
 *：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
 *before和after的详解:http://www.w3cplus.com/css3/learning-to-use-the-before-and-after-pseudo-elements-in-css.html
 *box-shadow详解：http://swordair.com/details-on-css3-box-shadow-part-1/
 *http://www.w3cplus.com/blog/tags/11.html
 */

.popover-left,.popover-top,.popover-bottom, .popover-right{
	/*border-style: solid;*/
	border-radius:6px;/*div平滑6个像素*/
	position: relative; /* 因为需要绝对定位子元素（这里就是伪元素），所以需要将其设置为相对对位 */
	background-color: white; /*白色*/
	width: 150px;
	height:150px;
	margin: 10px auto;
}
 
.popover-left::before{ /* 伪元素其实和普通元素没多大区别 */
	position: absolute; /* 绝对定位 */
	content: ' '; /* 伪元素需要有个content，这里设了一个空格占位 */
	left: -5px; /* 把这个小尖尖突出来 */
	top:50px; /* 往下挪一点点 */
	/**border-bottom-color: #999;
 	 **border-top-width: 0;
 	 */
	width: 25px; /* 25x25的一个元素 */
	height: 25px;
	border-radius:2px;/*突出来的角弧度稍微平滑2个像素*/
	background-color: white;
	box-shadow: 6px 5px 2px -9px white, 5px 6px 2px -9px white;/*box-shadow,左上角,右上角,左下角，右下角，白色*/
	/**======兼容浏览器=webkit支持(苹果谷歌等浏览器)，moz(火狐),ms（IE浏览器),-o(opera浏览器)====*/
	-webkit-transform: rotate(45deg); /* 旋转45度 */
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
}

.popover-right::after { /* 伪元素其实和普通元素没多大区别 */
	position: absolute; /* 绝对定位 */
	content: ' '; /* 伪元素需要有个content，这里设了一个空格占位 */
	left: 129px; /* 把这个小尖尖突出来 */
	top:50px; /* 往下挪一点点 */
	
	width: 25px; /* 20x20的一个元素 */
	height: 25px;
	
	border-radius:2px;/*突出来的角弧度稍微平滑2个像素*/
	background-color: white;
	box-shadow: 6px 5px 2px -9px white, 5px 6px 2px -9px white;/*box-shadow,左上角,右上角,左下角，右下角*/
	
	-webkit-transform: rotate(45deg); /* 旋转45度 */
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
}

.popover-top:after { /* 伪元素其实和普通元素没多大区别 */
  	content: "";
    position: absolute;
	top: -5px;/*角离div的边线-5px这个值越小就会突出这个正方形.*/
	left: 50%;

    width: 25px;
    height: 25px;
    border-radius:2px;/*突出来的角弧度稍微平滑2个像素*/
 	background-color: white;
   	box-shadow: 6px 5px 2px -9px white, 5px 6px 2px -9px white;/*box-shadow,左上角,右上角,左下角，右下角*/
   	
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
}

.popover-bottom:after { /* 伪元素其实和普通元素没多大区别 */
  	content: "";
    position: absolute;
    top: 129px;/*角离div的边线129px这个值越大就会突出这个正方形.*/
    left: 50%;
    
    
    width: 25px;
    height: 25px;
 	/**border-bottom-color: #999;
 	 **border-top-width: 0;
 	 */
 	border-radius:2px;/*突出来的角弧度稍微平滑2个像素*/
 	background-color: white;
    box-shadow: 6px 5px 2px -9px white, 5px 6px 2px -9px white;/*box-shadow,左上角,右上角,左下角，右下角*/
  
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
}
</style>
</head>

<body style="background-color: #61849e">

	<div class="popover-left">
	</div>
	<div class="popover-right">
	</div>

	<div class="popover-top">
	</div>
	
	<div class="popover-bottom">
	</div>
	<br/> 
	
	
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>popover-left,popover-right,popover-top,popover-bottom </title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style type="text/css">

/*
 *@Author:liangjilong
 *多个class是相同的用，分开
 *：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
 *box-shadow详解：http://swordair.com/details-on-css3-box-shadow-part-1/
 */

.popover-left,.popover-top,.popover-bottom, .popover-right{
	/*border-style: solid;*/
	border-radius:6px;/*div平滑6个像素*/
	position: relative; /* 因为需要绝对定位子元素（这里就是伪元素），所以需要将其设置为相对对位 */
	background-color: white; /*白色*/
	width: 150px;
	height: 150px;
	margin: 10px auto;
}
/**公共的样式**/
.popover-common{
	position: absolute; /* 绝对定位 */
	/**border-bottom-color: #999;
 	 **border-top-width: 0;
 	 */
	width: 25px; /* 25x25的一个元素 */
	height: 25px;
	border-radius:2px;/*突出来的角弧度稍微平滑2个像素*/
	background-color: white;
	box-shadow: 6px 5px 2px -9px white, 5px 6px 2px -9px white;/*box-shadow,左上角,右上角,左下角，右下角，白色*/
	/**======兼容浏览器=webkit支持(苹果谷歌等浏览器)，moz(火狐),ms（IE浏览器),-o(opera浏览器)====*/
	-webkit-transform: rotate(45deg); /* 旋转45度 */
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
}
.popover-left .popover-common{  
	left: -5px; /* 把这个小尖尖突出来 */
	top:50px; /* 往下挪一点点 */
}
.popover-right .popover-common {  
	left: 129px; /* 把这个小尖尖突出来 */
	top:50px; /* 往下挪一点点 */
}

.popover-top .popover-common { 
	top: -5px;/*角离div的边线-5px这个值越小就会突出这个正方形.*/
	left: 50%;
}

.popover-bottom .popover-common {  
    top: 129px;/*角离div的边线129px这个值越大就会突出这个正方形.*/
    left: 50%;
}
</style>
</head>

<body style="background-color: #61849e">
	
	<div class="popover-left">
		<div class="popover-common"></div>
	</div>
	<br/> 
	<div class="popover-right">
		<div class="popover-common"></div>
	</div>
	 <br/>

	<div class="popover-top">
		<div class="popover-common"></div>
	</div>
	 <br/>
	<div class="popover-bottom">
		<div class="popover-common"></div>
	</div>
	<br/> 
	
</body>
</html>