flag制作

原来有使用过clip-path制作类似勋章和flag图标。

这次本来也想使用clip-path来实现的，但是却发现不实用的，主要是因为字体也旋转了45deg而且背景图也需要切了以后旋转的。不是很方便控制，最重要的是最后我发现这些文字后台都是要取的那个百分比

没有办法只好用图片来实现，然后我居然把数字也切了出来，好吧

只好切过了一遍，使用div实现背景，然后span元素旋转来实现文字的翻转

开始实现的很好的也很接近原图

但是快做完页面的时候发现由于使用了transform:rotate属性的时候由于flag是打在右侧,所以超出了可视区域的宽度

然后只好拉大了背景，最终实现效果

好吧，确实有那么一点点不像的感觉

但是基本上实现了可以动态改变筹资进度

html:

<div class="project-desc"><span>筹资59%</span></div>

css:

.id-projext-panel>ul>li .project-desc  {

1. width: 6rem;
2. position: absolute;
3. top: 0;
4. right: 0;
5. color: #fff;
6. /* transform: rotate(45deg); */
7. height: 6rem;
8. line-height: 2rem;
9. background: url(../images/prject-bgable.png);
10. background-size: cover;

}

.id-projext-panel>ul>li .project-desc span  {

1. display: inline-block;
2. transform: rotate(45deg);
3. position: relative;
4. top: 0.8rem;
5. left: 1.8rem;
6. font-size: .8rem;

}