带有斜杠的进度条

线性渐变

background:-webkit-linear-gradient(-45deg,red 0px,red 10px,green 10px,green 20px);

径向渐变

 background:-webkit-radial-gradient(circle,yellow 50px,red 50px);

重复线性渐变

background:-webkit-repeating-linear-gradient(-45deg,red 0px,red 10px,green 10px,green 20px);

例子

css

div{
       background:-webkit-repeating-linear-gradient(-45deg,pink 0px,pink 10px,yellow 10px,yellow 20px);height:60px;
            }

html

<div></div>

效果图

20170721163856.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 因为近期项目没有压力,主要工作就是一些涉及功能增删相关的界面的小工作,修修补补,搞个图标之类,设计师小伙伴们都懂的...
    泱泱悲秋阅读 11,071评论 1 27
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 5,585评论 0 7
  • 前言 重拾css后的文章,在观看了慕课网上的视频《重拾CSS的乐趣》中,看到了一些有意思的css效果。想起当初自己...
    destiny0904阅读 5,901评论 0 0
  • 关于GraphX和Pregel的相关介绍,可以见这篇文章( http://www.jianshu.com/p/6f...
    Nicky_Ye阅读 6,828评论 0 1
  • 作文题目
    杨慧灵阅读 1,094评论 1 0

友情链接更多精彩内容