Css-深入学习之折角效果

本文是作者从别的网站和文章学习了解的知识，简单做了个笔记，想要学习更多的可以参考这里：【css进阶】伪元素的妙用--单标签之美，奇思妙想

 

代码：
 1   /*建立一个带圆角的矩形，并使用线性渐变将其从左到底透明渐变到深绿色，然后使用2D旋转矩形*/
 2         .corner:before{
 3           content: '';
 4           position: absolute;
 5           top: 0; right: 0;
 6           background:
 7           linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat; 
 8           /*线性渐变：从左到底（也就是从左边到最底部，斜切过来），
 9             透明50%的宽度渐变到rgba(0,0,0,.2) 0,，再到rgba(0,0,0,.4))
10             background-size：100% 0
11             不重复或平铺 
12           */
13           width: 1.73em; height: 3em;
14           transform: translateY(-1.3em) rotate(-30deg);
15           /*translateY(-1.3em)：y轴方向平移-1.3em，就向上移动出去了一点
16               rotate(-30deg)：  平面旋转-30度
17           */
18           transform-origin: bottom right;
19           border-bottom-left-radius: inherit;
20           box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
21         }
22         /*原理其实就是一个带切角的圆角矩形与一个小圆角矩形旋转拼合而成*/

 

 

 

posted @ 2016-11-09 17:00  YanEr、  阅读(1823)  评论(0)  编辑  收藏  举报