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

带切角的矩形:

该图来源于(奇思妙想

Css代码:

 .notching{
width: 160px;
height:160px;
}
.notching{
background:
linear-gradient(135deg, transparent 15px, deeppink 0)
top left,
linear-gradient(-135deg, transparent 15px, deeppink 0)
top right,
linear-gradient(-45deg, transparent 15px, deeppink 0)
bottom right,
linear-gradient(45deg, transparent 15px, deeppink 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}

1、建立一个矩形

2、利用线性渐变实现切角,科普一下代码知识:

linear-gradient             Css3的线性渐变

(135deg,                     渐变角度,看张图秒懂

transparent 15px,                 透明 15px的宽度

deeppink 0) 深粉色,              这里的0是渐变到底

top left;                               渐变填充 上左

3、根据第一个写好的(上左)渐变:linear-gradient(135deg, transparent 15px, deeppink 0)top left

然后复制粘贴,调整角度同样的去填充好上右,下左,下右。OK,现在还看不错啥效果。

4、最后一步,设置下background-size: 50% 50%; background-repeat: no-repeat;

(background-size: 50% 50%;【解释一下:把每个方向的填充看成一个小方块,每个填充的小方块X,Y都占据了其50%,也就是每个小方块的是x*50%,y*50%这样子,所以,呢,为了让他刚好填充合适就是50%了,如果是40%你会发现小方块太小了,填充不慢,如果是100%你会发现太大了,占满了都。】

最后一个就是不要重复了 ,肯定的,重复就做不出这个效果了。)

不规则切角矩形:

(该图灵感来源于上面的第四步)

这是我在无意研究第四步的background-size时发现的,也算是一个小聪明吧。

按照上面的步骤,当你把background-size设置成90% 90%时,你就发现上面这个图形了,其实原理就是,当每个小方块占到原图的90%时,严重超出了原本界定的框线,然后就看到了超出的一小部分,其实更多的部分由于重叠在一起了,所以就没能看出来。

如果我们把每个填充的方向分开来看,也许你就瞬间秒懂了:

在比如说我们给每个方向的渐变调整下颜色:

(然后呢就看到了,其实是因为太大重叠在一起,超出边界而产生的)

实际上,也就是使其超出一点,刚好合适,就实现了上面的不规则切角矩形了。

Css--深入学习之切角的更多相关文章

  1. Css-深入学习之弧形切角矩形

    本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 (弧形切角矩形) 代码: width: 180px; heig ...

  2. css实现切角效果

    1. 一个切角 思路:如果我们要得到有一个切角的元素,我们只需要使用一个径向渐变就可以达到这个目标,这个渐变需要把一个透明色标放在切角处,然后再相同的位置设置另一个色标,并且把它的颜色设置成我们想要的 ...

  3. CSS奇思妙想图形(心形、气泡三角形、切角、梯形、饼图等)

    今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...

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

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

  5. Css--深入学习之折角效果

    本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 代码: /*建立一个带圆角的矩形,并使用线性渐变将其从左到底透 ...

  6. CSS入门级学习

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

  7. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  8. HTML&amp;CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  9. 【Android】图片切角,切指定的边。

    公司的项目,UI和应用都是我自己做的.前几天设计了一个UI,出现了半边圆角的情况,如下图片所示.图片都来自服务器,肯定不能要求返回的图片按这个格式,必须在应用端对图片进行切角. Google了好久,发 ...

随机推荐

  1. redis学习笔记——(4)

    一.概述: 在该系列的前几篇博客中,主要讲述的是与Redis数据类型相关的命令,如String.List.Set.Hashes和Sorted-Set.这些命令都具有一个共同点,即所有的操作都是针对与K ...

  2. VS2015 添加DNX SDK

    第一次运行VS2015,添加第一个ASP.NET 5程序时会报一个错误“DNX SDK版本 “dnx-clr-win-x86.1.0.0-beta5”无法安装. 解决办法: 打开CMD :输入 @po ...

  3. Python之Socket&amp;异常处理

    Socket Socket用于描述IP地址和端口号,每个应用程序都是通过它来进行网络请求或者网络应答. socket模块和file模块有相似之处,file主要对某个文件进行打开.读写.关闭操作.soc ...

  4. Serializable 都这么牛逼了,Parcelable 还要你何用?

    一些闲聊 距离上一篇文章似乎又是很久了,看起来也没有很多反馈,催更就更不用说了.哈哈,放弃了. 话说最近公司在招聘一批至少 5 年开发经验的 Android 开发工程师,我也是忙开了花,激动得不行呀. ...

  5. Hadoop启动脚本分析

    Hadoop启动脚本分析 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 能看到这篇博客的你估计对Hadoop已经有一个系统的了解了,最起码各种搭建方式你应该是会的,不会也没有关系, ...

  6. php上传多张图片

    第一种:加后缀 代码实现(就是普通的上传图片,只是在外面加个foreach循环) $allow_file_types = '|GIF|JPG|PNG|BMP|SWF|DOC|XLS|PPT|MID|W ...

  7. BI怎么选?重点看这10个技术指标

    2016年,商业智能市场火热,不管是投资圈还是IT圈,都在广泛关注着大数据和商业智能.宣传广告媒体报道见多了,不知道大家对BI选型的技术标准有谱了没.笔者对Gartner的BI魔力象限考评的15个关键 ...

  8. Unreal Engine 4 基于Kajiya-Kay的材质迭代

    转自:http://www.52vr.com/article-859-1.html 在先前的文章Unreal Engine 4 —— Kajiya-Kay Shading在UE4中的实现 中过了一遍怎 ...

  9. Class AB与Class D功放

    D类功放   又称之为数字功放,其特点是,工作效率高,体积小. D类功放的结构       第一部分为调制器,最简单的只需用一只运放构成比较器即可完成.把原始音频信号加上一定直流偏置后放在运放的正输入 ...

  10. ESXi6.7安装流程和bug处理

    ·前言 ·准备工作 ·安装 ·Initializing IOV卡住 ·缺少网卡驱动 ·安装ESXi6.7 ·Multiboot could not setup the video subsystem ...