master

分支 (2)

管理

管理

master

dev_test

web-test
/
CSS实现带小三角的消息提示框效果.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" />
		<meta name="format-detection" content="telephone=no">
		<meta name="msapplication-tap-highlight" content="no">
		<style>
			.btn_exc button {
				border: 1px solid #333333;
				font-family: PingFang-SC-Regular;
				font-size: 14px;
				color: #333333;
				height: 30px;
				text-align: center;
				border-radius: 6px;
				background: #FFF;
			}

			.btn_exc .tips:after {
				position: absolute;
				display: inline-block;
				top: -7px;
				left: 40px;
				width: 0;
				height: 0px;
				content: '';
				border-style: solid;
				border-width: 7px;
				border-color: #fff;
				transform: rotate(-45deg);
				box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.10);
			}

			.btn_exc .tips {
				display: none;
				position: absolute;
				z-index: 100;
				width: 600px;
				left: 5px;
				transform: translateY(5px);
				-webkit-transform: translateY(5px);
				text-align: justify;
				background: #ffffff;
				border-radius: 6px;
				padding: 0px 15px 15px 15px;
				color: #666666;
				font-family: PingFang-SC-Regular;
				font-size: 14px;
				box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.10);
				margin-top: 10px;

			}

			.btn_exc .tips .one {
				height: 15px;
				width: 50px;
				left: 30px;
				background: #ffffff;
				position: absolute;
				z-index: 111;
			}
		</style>
	</head>
	<body>
		<div class="btn_exc">
			<button onclick="open_tips()">点我弹窗</button>
			<div class="tips" id="tips">
				<!--不加阴影可以去掉这个-->
				<div class="one"></div>
				<div style="margin-top:15px;">
					带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果
				</div>

			</div>
		</div>
		<script>
			function open_tips() {
				document.getElementById('tips').style.display = 'block';
			}
		</script>
	</body>
</html>