下拉图片上方的小三角形

前端的同学们是不是在遇到写网页时他需要你图片上有一个小三角形，今天小编带你来了解这个小三角形的写法。 

这个二维码是我的博客，小伙伴们关注我我会不定时更新内容！

 一.首先我们用div等宽高设置一个正方形，给他加上一个背景颜色，

用这个transform: rotate(45deg);给这个div旋转45度

 我们在导入一张图片，给他调整位置就可以了。

在给他一个定位调整到自己想要的位置。（不知道定位的我之前发布的内容有定位）

预览图：​​​​​​​​​​​​​​

1.这里是HTML代码 

		<ul class="nav-left">
			<li><a href="#"><span>小米官网</span></a></li>
			<li><a href="#"><span>小米商城</span></a></li>
			<li><a href="#"><span>MIUI</span></a></li>
			<li><a href="#"><span>IoT</span></a></li>
			<li><a href="#"><span>云服务</span></a></li>
			<li><a href="#"><span>天星数科</span></a></li>
			<li><a href="#"><span>有品</span></a></li>
			<li><a href="#"><span>小爱开放平台</span></a></li>
			<li><a href="#"><span>企业团购</span></a></li>
			<li><a href="#"><span>资质证照</span></a></li>
			<li><a href="#"><span>协议规则</span></a></li>
			<li class="cord">
				<a href="#"><span>下载app</span></a>
				<div class="square"></div>
				<div class="QR-code">
					<span id="QR-font">
						<img src="./img/bj.jpg" style="width: 124px;height: 124px;;">
					</span>
				</div>
			</li>
			<li><a href="#"><span>Select Location</span></a></li>
		</ul>

2.这里是css代码

<style>
			.nav-left {
				display: flex;
				width: 1200px;
				height: 50px;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
				background-color: #ffaaff;
			}

			.nav-left li {
				list-style: none;
				margin: 0 10px;
			}

			.nav-left li a {
				text-decoration: none;
			}

			.QR-code {
				position: absolute;
				transition: all .5s;
				top: 36px;
				height: 124px;
				width: 124px;
				overflow: hidden;
				text-align: center;
				margin-left: -38px;
				box-shadow: 0 1px 5px #aaa;
				background-color: #fff;
				line-height: 1;
			}

			.square {
				width: 10px;
				height: 10px;
				position: absolute;
				background-color: white;
				top: 30px;
				left: 20px;
				transform: rotate(45deg);
			}

			#QR-font img {
				border: 0;
			}

			.cord {
				position: relative;
			}
		</style>

过几天小编在给大家写其他的方法。