CSS伪类选择器实现气泡

　康　

已于 2022-06-11 11:31:42 修改

阅读量328

点赞数

分类专栏： css 文章标签： CSS 伪类气泡效果三角形边框

于 2022-06-11 11:22:34 首次发布

本文链接：https://blog.csdn.net/qq_40047019/article/details/125232634

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

气泡-实心

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS伪类选择器实现气泡-实心</title>
		<style type="text/css">
			.pop_top,
			.pop_right,
			.pop_bottom,
			.pop_left {
                float: left;
				width: 150px;
				height: 100px;
				background: #CCC;
				border-radius: 5px;
				margin: 50px;
				position: relative;
			}
			
			/* 三角形在上边 */
			.pop_top:before {
				content: "";
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-bottom: 10px solid #CCC;
				position: absolute;
				top: -10px;
				left: 65px;
			}
			
			/* 三角形在右边 */
			.pop_right:before {
				content: "";
				width: 0;
				height: 0;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				border-left: 10px solid #CCC;
				position: absolute;
				top: 40px;
				left: 150px;
			}
			
			/* 三角形在下边 */
			.pop_bottom:before {
				content: "";
				width: 0;
				height: 0;
				border-top: 10px solid #CCC;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				position: absolute;
				top: 100px;
				left: 70px;
			}
			
			/* 三角形在左边 */
			.pop_left:before {
				content: "";
				width: 0;
				height: 0;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				border-right: 10px solid #CCC;
				position: absolute;
				top: 40px;
				left: -10px;
			}
		</style>
	</head>
	<body>
		<!--三角形在上边-->
		<div class="pop_top"></div>
 
		<!--三角形在右边-->
		<div class="pop_right"></div>
 
		<!--三角形在下边-->
		<div class="pop_bottom"></div>
 
		<!--三角形在左边-->
		<div class="pop_left"></div>
	</body>
</html>

效果图

气泡-边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS伪类选择器实现气泡-边框</title>
		<style type="text/css">
			.pop_top,
			.pop_right,
			.pop_bottom,
			.pop_left {
				float: left;
				width: 150px;
				height: 100px;
				border: 1px solid #CCC;
				border-radius: 5px;
				margin: 50px;
				position: relative;
			}
			
			/* 三角形在上边 */
			.pop_top:before {
				content: '';
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-bottom: 10px solid #CCC;
				position: absolute;
				top: -11px;
				left: 65px;
			}

			.pop_top:after {
				content: '';
				width: 0;
				height: 0;
				border-left: 9px solid transparent;
				border-right: 9px solid transparent;
				border-bottom: 9px solid #FFFFFF;
				position: absolute;
				top: -9px;
				left: 66px;
			}
			
			/* 三角形在右边 */
			.pop_right:before {
				content: '';
				width: 0;
				height: 0;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				border-left: 10px solid #CCC;
				position: absolute;
				top: 34px;
				left: 150px;
			}

			.pop_right:after {
				content: '';
				width: 0;
				height: 0;
				border-top: 9px solid transparent;
				border-bottom: 9px solid transparent;
				border-left: 9px solid #FFFFFF;
				position: absolute;
				top: 35px;
				left: 149px;
			}
			
			/* 三角形在下边 */
			.pop_bottom:before {
				content: '';
				width: 0;
				height: 0;
				border-top: 10px solid #CCC;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				position: absolute;
				top: 100px;
				left: 69px;
			}

			.pop_bottom:after {
				content: '';
				width: 0;
				height: 0;
				border-top: 9px solid #FFFFFF;
				border-left: 9px solid transparent;
				border-right: 9px solid transparent;
				position: absolute;
				top: 99px;
				left: 70px;
			}
			
			/* 三角形在左边 */
			.pop_left:before {
				content: '';
				width: 0;
				height: 0;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				border-right: 10px solid #CCC;
				position: absolute;
				top: 40px;
				left: -11px;
			}

			.pop_left:after {
				content: '';
				width: 0;
				height: 0;
				border-top: 9px solid transparent;
				border-bottom: 9px solid transparent;
				border-right: 9px solid #FFFFFF;
				position: absolute;
				top: 41px;
				left: -9px;
			}
		</style>
	</head>
	<body>
		<!--三角形在上边-->
		<div class="pop_top"></div>
		
		<!--三角形在右边-->
		<div class="pop_right"></div>
		
		<!--三角形在下边-->
		<div class="pop_bottom"></div>
		
		<!--三角形在左边-->
		<div class="pop_left"></div>
	</body>
</html>

效果图