带三角箭头的对话框

最新推荐文章于 2024-01-26 10:58:04 发布

原创最新推荐文章于 2024-01-26 10:58:04 发布 · 464 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#带箭头的矩形框

样式CSS 专栏收录该内容

11 篇文章

订阅专栏

带三角箭头的样式（代码附上）

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>带三角箭头的对话框</title>
	<style type="text/css">
		#wrapper {
			display: inline-block;
			position: relative;
			padding: 10px 20px;
			margin-top: 100px;
			border: 2px solid #98C1CC;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			font-size: 14px;
			font-weight: bold;
			text-align: center;
			box-shadow: 0px 2px 15px 0px #98C1CC;
		}
		#triangle {
			/*left: 50%;与margin-left: 15px;是为了实现三角形的水平居中*/
			position: absolute;
			top: -30px;
			left: 15%;
			/* margin-left: 15px; */
			width: 0;
			height: 0;
			border-width: 15px;
			border-style: solid;
			border-color: transparent transparent #98C1CC transparent;
		}
		#triangle div {
			position: absolute;
			top: -12px;
			left: -15px;
			width: 0;
			height: 0;
			border-width: 15px;
			border-style: solid;
			border-color: transparent transparent #fff transparent;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="triangle"><div></div></div>
		<div><span>我的 你的 他的  人家</span></div>
	</div>
</body>
</html>