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

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
































Css--深入学习之折角效果的更多相关文章

  1. CSS3实战开发: 折角效果实战开发

    <!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name ...

  2. css 折角效果/切角效果

    首先我们先创建一个图案为100像素的斜面切角的图案 html <div class="one">12345</div> css .one{ width: 1 ...

  3. CSS3图片折角效果

    本篇文章由:http://xinpure.com/css3-picture-angle-effect/ 图片折角效果主要是通过设置 border 属性实现的效果 效果预览 效果解析 假设我们将一个元素 ...

  4. CSS3知识之折角效果

    CSS3折角效果:可兼容不同背景

  5. CSS 折角效果

    1 <style type="text/css"> .div1 { width: 200px; height: 200px; background-color: #ff ...

  6. css切角效果,折角效果

    html <div class="one">12345</div> <div class="two">abcde</d ...

  7. CSS基础学习-15.CSS3 动画效果

  8. div折角~~~

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  9. CSS入门级学习

    css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...

随机推荐

  1. LCM性质 + 组合数 - HDU 5407 CRB and Candies

    CRB and Candies Problem's Link Mean: 给定一个数n,求LCM(C(n,0),C(n,1),C(n,2)...C(n,n))的值,(n<=1e6). analy ...

  2. ETL数据从sqlserver到mysql之间迁移

    因近期需要进行sqlserver数据到mysql之间的数据同步.偶然之间发现了这一款工具ELK 一.下载 1.Kettle可以在http://kettle.pentaho.org/网站下载 2.下载的 ...

  3. DateHelper.cs日期时间操作辅助类C#

    //==================================================================== //** Copyright © classbao.com ...

  4. 解决VS调试时断点不会命中

    断点调试是VS中的一大利器,有了它我们可以快速定位到代码的问题所在.在某些情况下会导致设置了断点后程序无法在断点处停下,下面分4种情况来解决断点不会命中的问题 百度经验:jingyan.baidu.c ...

  5. JsCharts图表的介绍和简单使用

    一.JSCharts介绍 JScharts是一个用于在浏览器直接绘制图表的javascript工 具包.JScharts支持柱状图.圆饼图以及线性图,可以直接将这个图插入网页, JScharts图的数 ...

  6. 自己动手写计算器v1.1

    这个改动主要是使用工厂模式替代了简单工厂模式,这样做的好处是如果以后我们要扩充其他运算时,就不用总是去修改工厂类, 这是可以采取工厂模式,主要是将原来简单工厂类的逻辑判断分离出来,将它作为一个借口,与 ...

  7. 自己动手写计算器v1.0

    今天突发奇想,想着看了还几个设计模式了,倒不如写点东西来实践它们.发现计算器这种就比较合适,打算随着设计模式的学习,会对计算器不断的做改进. 包括功能的增加和算法的改进.初学者难免犯错,希望大家不吝指 ...

  8. α-β剪枝算法的java语言实现(非常实用)

    利用α-β剪枝算法,对下图所示的博弈树进行搜索,搜索得到根节点选择的走步,以及没有必要进行评估的节点,并求出给出在何处发生了剪枝,以及剪枝的类型(属于α剪枝还是β剪枝). 注:□表示MIN节点:○表示 ...

  9. 使用SSH上传安装eclipse

    安装eclipse 步骤: 1.上传eclipse tar文件 2.[root@localhost soft]# tar -zxvf eclipse-jee-galileo-SR2-linux-gtk ...

  10. CSS3之新UI方案

    border-radius 圆角 参数可为像素 也可为百分比 当一个参数时 作用范围为四个角 当两个参数时 作用范围为 左上右下 右上左下 当三个参数时 作用范围为 左上 右上左下 右下 当四个参数时 ...