利用CSS制作气泡窗口的小三角形

最新推荐文章于 2024-07-14 14:29:26 发布

墨迹仙

最新推荐文章于 2024-07-14 14:29:26 发布

阅读量675

点赞数 1

文章标签： CSS

本文链接：https://blog.csdn.net/qq_33758085/article/details/101201260

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>气泡窗口的小三角形</title>
		<style type="text/css">
			.delta{
				width: 348px;
				height: 140px;
				border:1px solid  #D3D3D3;
				border-radius: 10px;
			}
			.delta:before{
				content: "";
				display: block;
				position: absolute;
				top: 57px;
				left: 357px;
				overflow: hidden;
				width: 0;
				height: 0;
				border-width: 12px;
				border-style: dashed dashed dashed solid;
				border-color: transparent transparent transparent lightgray;
			}
			.delta:after{
				content: "";
				display: block;
				position: absolute;
				top: 59px;
				left: 357px;
				overflow: hidden;
				width: 0;
				height: 0;
				border-width: 10px;
				border-style: dashed dashed dashed solid;
				border-color: transparent transparent transparent white;
			}
		</style>
	</head>
	<body>
		<div class="delta">
		</div>
	</body>
</html>

效果：