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 {
- width: 6rem;
- position: absolute;
- top: 0;
- right: 0;
- color: #fff;
- /* transform: rotate(45deg); */
- height: 6rem;
- line-height: 2rem;
- background: url(../images/prject-bgable.png);
- background-size: cover;
}
.id-projext-panel>ul>li .project-desc span {
- display: inline-block;
- transform: rotate(45deg);
- position: relative;
- top: 0.8rem;
- left: 1.8rem;
- font-size: .8rem;
}