css折角的简单实现真实项目实践

这么久以来，第一次用了折角的效果，哈哈。先来看下这个折角的效果图：

直接上代码：

关键代码：
<style>.wu{color: #fff;background:linear-gradient(-135deg, #EDEDED 2em,#cccccc 0) !important;position: relative;}/******#EDEDED  这个颜色指的是三角形的区域背景颜色#cccccc  指没被折角的区域*/</style><div class="conten-item wu"><div style="border-bottom: 0.5px solid #E5E5E5;" class="pf">下午</div><div class="pf"><span style="font-size:14px">剩余号源:</span> <span style="font-size:20px;  padding-left: 5px;" >0</span></div><span style="position: absolute;top: 3px;right: 6px;font-size: 12px;color: #FF2D69;">满</span>
</div>

background:linear-gradient(-135deg, #EDEDED 2em,#cccccc 0) !important;

#EDEDED 这个颜色指的是三角形的区域背景颜色

#cccccc 指没被折角的区域

css折角的简单实现真实项目实践相关推荐

Jenkins使用FTP进行一键部署及回滚2（Windows）（项目实践）
前提: 这一篇是继上一篇http://www.cnblogs.com/EasonJim/p/6092938.html的真实项目实践. 思路和大致实现步骤请参照上一篇文章. 注意:这篇文章涉及到两台服务 ...
纯CSS实现圆角阴影的折角效果
纯CSS实现圆角阴影的折角效果 2016-10-04 13:14 网页设计标签:css 1637 2 把元素的一角处理类似折角的形状,再配上或多或少的修饰,这种效果已经成为一种非 ...
从真实项目中抠出来的设计模式——第三篇：责任链模式
一:现实场景有时候在开发的过程中,我们经常会根据某个状态的值,写出很多的ifelse逻辑,比如拿项目里面的案例来说,如果当前发送的是彩信,此种状态需要如何给实体赋值,如果是短信,邮件又是其他方式的赋 ...
从真实项目中抠出来的设计模式——第二篇：过滤器模式
一:实际场景介绍我们在给用户做订单催付通知的时候,会有这样的一种场景,用户在系统后台设置一组可以催付的规则,比如说订单金额大于xx元,非黑名单用户,来自哪个地区,已购买过某个商品,指定某个营销活动 ...
eclipse 如何关联git_作为一名初学Java者如何做简单的Java项目
作为一名初学Java者而言,如何做简单的Java项目?想要更有效率的学习Java技术,理论中穿插项目练习很有必要.但项目练习要在你掌握了一定的技术之后才能做的,它是用来加深你对技术理解的. 就拿Jav ...
android真实项目教程（四）——MY APP MY STYLE_by_CJJ
大家下午好...如果在学校,到时间吃晚饭了....隔了好久才重新敲代码...又落后那么多了,要更加努力学习了....今天下午写了下app的第四部分... 这里给下之前三部分的地址,因为如果第一次看,, ...
android真实项目教程(三)——首页初点缀_by_CJJ
大家晚上好,CJJ不好,前天打球,把右手弄脱臼了...搞得我现在只能一只手敲代码...那效率,我给自己跪了 ...写了好久,才写了那么一丁点...明明还有好多要说的...也只能等手好了再继续吧...呵 ...
android真实项目教程（二）——漫画App初构_by_CJJ
大家晚上好,我是CJJ,继昨天写好框架之后,今天上班一直在想做什么东西...本来想拿我即将要上交的毕业设计做教程的,但是想想好像在重复工作那样子....呵呵 ... 伟大的先人说过,不要重复制造轮子. ...
CSS背景图像的简单响应
本文设有很多,最理想的解决方案,响应图像只是其中之一.我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案. 大家都在谈论的的sr ...
开发那些坑之使用百川趣拍sd集成真实项目
2016 1-30以前提供的是eclipse项目在网上,很坑爹,我的eclipse导入或者是as导入总是各种奇葩问题,最后终于找到了as版本,1天没搞定的问题马上搞定了. 下载之后要做的就是改包名 ...

css折角的简单实现真实项目实践

css折角的简单实现真实项目实践相关推荐

最新文章

热门文章

css折角的简单实现 真实项目实践

css折角的简单实现 真实项目实践相关推荐

最新文章

热门文章

css折角的简单实现真实项目实践

css折角的简单实现真实项目实践相关推荐