本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:【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. 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...

  2. Unity 3D json嵌套使用以及多种类型匹配

    我们控制端要发送很多命令给终端设备,其中有速度,方向,开关门,开关灯....方法千万种,我只取一瓢.我还小,不知道其他人是怎么写的.我喜欢把有规律的东西放在一起写!为了我的强迫症! using Uni ...

  3. js正则表达式校验非零的正整数:^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js正则表达式校验正数、负数、和小数:^(\-|\+)?\d+(\.\d+)?$

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 关于Agile Scrum的笔记

    Roles: Scrum Master -- advisor but leader, 替Team消除障碍 Product Owner -- 定sprint的交付内容, 优先级 Team -- 干活的, ...

  6. C# 引用类型和值类型

    C# 引用类型和值类型 CLR支持两种类型:引用类型和值类型. 1.引用类型 (1)内存必须从托管堆上分配: (2)堆上分配的每个对象都有一些额外成员(包括“类型对象指针”,“同步块索引”),这些成员 ...

  7. 分布式任务&分布式锁(li)

    目前系统中存在批量审批.批量授权等各个操作,批量操作中可能因为处理机器.线程不同,造成刷新缓存丢失授权等信息,如批量审批同一用户权限多个权限申请后,流程平台并发的发送多个http请求到acl不同服务器 ...

  8. Java Business Process Management(业务流程管理) 初识环境搭建

    一.简介 (一)什么是jbpm JBPM,全称是Java Business Process Management(业务流程管理),它是覆盖了业务流程管理.工作流.服务协作等领域的一个开源的.灵活的.易 ...

  9. linux(七)__shell脚本编程

    一.什么是shell脚本 shell除了是命令解释器之外还是一种编程语言,用shell编写的程序类似于DOS下的批处理程序. 它是用户与操作系统之间的一个接口. shell脚本语言非常擅长处理文本类型 ...

  10. 升级Centos的python为2.7(centos python 升级)

    1.首先下载python的2.7.8版本的tar包.为什么没有选择最新版本的3.4呢?因为3版本的兼容性不好.很多一些成熟的项目都是基于2.7开发的. https://www.python.org/d ...