<div class="fancy">
<h2>
<span class="ribbon-center">50% OFF!</span>
</h2>
<p>
<img src="/uploads/160501/glass.jpg">
Check out these killer deals from Oakley!
Get an additional 50% off sale items for a limited time.
</p>
</div>
接下来给卡片和商品描述添加样式，来限定高宽和间距：
[css] view plain copy
.fancy {
width: 340px
margin: 20px auto 20px auto
background: #E7E7E7
padding: 15px
}
.fancy p {
padding-top: 10px
margin: 5px 0
line-height: 1.5
}
.fancy img {
width: 340px
}
blob.png
现在页面看起来像上面这样，接下来就是要给标签（h2元素）添加样式，一个是背景色，一个是左边的3D折纸效果。
折边效果其实就是给h2的左下角拼接一个三角形的元素，我们使用伪元素来实现，代码如下：
[css] view plain copy
.fancy h2 {
font-style: italyc
line-height: 1
padding: 5px 0
color: #FFF
margin: 0
width: 205px
left: -35px// 相对卡片向左偏移35px
background-color: #e54439
position: relative
z-index: 6
}
.fancy h2:after {// 定义一个斜三角形
content: ""
width: 0
height: 0
position: absolute
font-size: 0
line-height: 0
z-index: 5
border-top: 0 solid transparent
border-bottom: 15px solid transparent
bottom: -15px
}
.fancy h2:after {
border-right: 20px solid rgb(230, 107, 97)
left: 0
}
.fancy h2 .ribbon-center {
display: block
padding: 10px 0
background-color: #e54439
}
纸船的折法如下：
工具/原料
纸
1、找一张纸，长方形的就行，从中间折一下。
2、对折之后，再折出如下样子。
3、将下面的部分折上来。
4、将3中形状从中间进行翻折。
5、将两个角折起来。
6、同步骤4，对5中形状从中间进行翻折。
7、再将两个角折起来。
8、将7中形状拉开就可以了。
