flag制作
来源:互联网 发布:小学生画画软件 编辑:程序博客网 时间:2024/05/17 03:16
原来有使用过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;
}
阅读全文
0 0
- flag制作
- mayaAPI(制作command flag流程)
- FLag
- Flag
- flag
- flag
- flag
- FLAG
- Flag
- Flag
- FLAG
- Flag
- flag
- Flag
- flag
- flag
- FLAG
- flag
- 手动将jar包导入本地maven仓库
- mysql所支持的日期时间类型有:DATETIME、 TIMESTAMP、DATE、TIME、YEAR。
- HDU 2006-4 Programming Contest 迷宫城堡
- 解决在非Activity中使用startActivity
- C与C++不分家,如何学好它?
- flag制作
- 《Core Java》读书笔记——第6章
- 什么是接口?
- 递归7.递归方法实现逆序
- H5的突破性技术特色
- make(5)
- 编程的一点小感悟
- LeetCode-54.Spiral Matrix
- redis安装与运行