消息气泡

最新推荐文章于 2020-09-09 20:27:10 发布

你只是看上去很努力

最新推荐文章于 2020-09-09 20:27:10 发布

阅读量285

点赞数

本文链接：https://blog.csdn.net/weixin_40312617/article/details/78040296

版权

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	img{
	box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
	}
	.angle{
	width: 0;
	height:0;
	border: 20px solid transparent;
	border-top:20px solid red;
	margin-top: 30px;
	}
	.dialog{
	width: 200px;
	height: 50px;
	border-radius: 7px;
	background: orange;
	position: relative;
	}
	.dialog:after{
	content: "\200B";
	display:block;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-left: 10px solid orange;
	position: absolute;
	top: 10px;
	right: -20px;
	}
	.icon{
	display: inline-block;
	width: 38px;
	height: 43px;
	background: url("pic1.png") no-repeat -330px -47px;
	}
	.icon2{
	display: inline-block;
	width: 38px;
	height: 43px;
	background: url("pic1.png") no-repeat -371px -47px;
	}
	</style>
	</head>
	<body>
	<img src="http://img1.imgtn.bdimg.com/it/u=2482769153,3919727172&fm=27&gp=0.jpg">
	<!--做一个三角形-->
	<div class="angle"></div>
	<!--对话框-->
	<div class="dialog"></div>
	<!--精灵技术-->
	<span class="icon"></span>
	<span class="icon2"></span>
	</body>
	</html>