本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:【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. 【无私分享:ASP.NET CORE 项目实战(第十二章)】添加对SqlServer、MySql、Oracle的支持

    目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 增加对多数据库的支持,并不是意味着同时对多种数据库操作,当然,后面,我们会尝试同时对多种数据库操作,这可能需要多个上下文,暂且 ...

  2. HibernateUtil.java

    package com.hkwy.util; import org.hibernate.Session; import org.hibernate.SessionFactory; import org ...

  3. Java 单例模式详解

    概念: java中单例模式是一种常见的设计模式,单例模式分三种:懒汉式单例.饿汉式单例.登记式单例三种. 单例模式有一下特点: 1.单例类只能有一个实例. 2.单例类必须自己自己创建自己的唯一实例. ...

  4. mysql 安装

    编译环境yum install gcc gcc-c++ ncurses-devel perl 依赖yum install boost boost-devel boost-doc 安装cmake wge ...

  5. Struts2的经典入门

    一:Struts2的起源与背景 在了解Struts2之前我们先来聊聊Struts1,我们都知道在很长的一段时间内,所有的MVC框架中,Struts1他是处于一个超级大咖的地位,无论是从市场角度和使用的 ...

  6. dyld 加载 Mach-O

    ➠更多技术干货请戳:听云博客 前言 最近看 ObjC的runtime 是怎么实现 +load 钩子函数的实现.进而引申分析了 dyld 处理 Mach-O 的这部分机制. 1.简单分析 Mach-O ...

  7. Android核心组件 Activity组件

    1.Activity简介 四大组件之一的Activity组件,在应用中一个Activity可以用来表示一个界面,中文意思也可以理解为"活动",即一个活动开始,代表Activity组 ...

  8. 解决ie6下li左浮动文字换行的问题

    问题: 使用li左浮动来自动换行,当父标签剩下宽度不够一个li的宽度时,在ie6中最后一个li中的文字出现换行 解决办法: ul{ white-space:nowrap;} /*强制文字不换行*/

  9. ASP.NET MVC 初体验

    MVC系列文章终于开始了,前段时间公司项目结束后一直在封装一个html+ashx+js+easyui的权限系统,最近差不多也完成了,迟些时候会分享源码给大家.当然这个MVC系列结束后如果时间允许还会另 ...

  10. VS2010以及vs10sp1安装问题

    进公司第一天搭建开发环境,由于系统版本有点低,安装遇到各种问题,在此总结一下,以备日后有用. 问题描述 Windows server 2003 安装VS2010时,安装到Microsoft.NET F ...