代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;}
img{vertical-align: top;border: none;}
.clearfix:after{content: ""; display: block; clear: both; }
.clearfix{zoom:1;}
.box{
width: 700px;
margin: 30px auto;
}
.content{
margin-right: -20px;
}
.item{
width: 220px;
float: left;
margin-right: 20px;
}
.img{
position: relative;
}
.img,.img img{
width: 220px;
height: 135px;
}
.zhe{
position: absolute;
right: -4px; top: 0;
width: 48px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 14px;
font-family: "Microsoft YaHei","微软雅黑";
background-color: #FF6155;
color: #FFF;
}
.zhe i{
position: absolute;
right: 0;
top: 100%;
height: 0;
width: 0;
border-width: 0 0 4px 4px;
border-style: solid;
border-color: transparent transparent transparent #7E1811;
}
</style>
</head>
<body>
<div class="box">
<div class="content clearfix">
<div class="item">
<div class="img">
<img src="img/mfw.png" alt="">
<span class="zhe">1.2折<i></i></span>
</div>
<p>爱上对方爱上对方爱上对方爱的色放爱上对方</p>
</div>
<div class="item">
<div class="img">
<img src="img/mfw.png" alt="">
<span class="zhe">1.2折<i></i></span>
</div>
<p>爱上对方爱上对方爱上对方爱的色放爱上对方</p>
</div>
<div class="item">
<div class="img">
<img src="img/mfw.png" alt="">
<span class="zhe">1.2折<i></i></span>
</div>
<p>爱上对方爱上对方爱上对方爱的色放爱上对方</p>
</div>
</div>
</div>
</body>
</html>
效果图：
image.png
