linear-gradient 实现切角效果

一、前言

linear-gradient() ：函数用于创建一个表示两种或多种颜色线性渐变的图片。即实现线性渐变！

二、基础用法

默认渐变方向是从上到下渐变，这种情况不需要申明渐变方向！

/* 1. 从上到下， 从红色开始，转为黄色，再到蓝色*/
#grad {background-image: linear-gradient(red, yellow, blue);
}/* 2. 从左到右，从红色开始，转为黄色 */
#grad {background-image: linear-gradient(to right, red , yellow);
}/* 3. 从右上角到左下角的线性渐变 */
#grad {background-image: linear-gradient(to left top, blue, red);/* to left top : 从右下角到左上角的线性渐变；to right top : 从左下角到右上角的线性渐变；to left bottom : 从右上角到左下角的线性渐变；to right bottom : 从左上角到右下角的线性渐变；*/
}/* 4. 指定一个角度（选择180deg）的线性渐变 */
#grad {background-image: linear-gradient(180deg, red, yellow);
}/* 5. 使用透明度 */
#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

三、渐变实现缺角矩形

3.1 基础：从60％的梯度线开始的渐变

有时候我们不希望一开始就出现渐变，可以从中间某个地方开始最好。为了实现这个效果，可以在你希望渐变梯度开始的地方，加上一个同样色值的颜色中间点。

div {background: linear-gradient(135deg, red, red 60%, blue);/*background: linear-gradient(135deg, red 60%, blue);  这样写一样*/
}

3.2 不需要过渡颜色（不要过渡渐变）

div {// 偏移135deg；从5%开始渐变; 渐变到蓝色，但是不要过渡（blue 0 ：这里的0不能省，表示不要过渡）background: linear-gradient(135deg, red 5%, blue 0);
}

3.3 实现切角矩形

div {// 偏移135deg；从30px（实现圆角矩形使用px可精确控制圆角的大小，开始颜色是透明，则不显示，造成了圆角效果）开始渐变; 渐变到蓝色，但是不要过渡（blue 0 ：这里的0不能省，表示不要过渡）background: linear-gradient(135deg, transparent 30px, blue 0);
}

更多特殊效果（参考博客）：https://www.cnblogs.com/zhuhuoxingguang/p/6108236.html

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出

对博客文章的参考，若原文章博主介意，请联系删除！请原谅

linear-gradient 实现切角效果相关推荐

css实现平角切角和弧形切角效果
在web设计中,有时候会碰到一些切角的样式需求,实现方法有很多种,用图片也好,结点叠加覆盖也好,都可以实现切角的样式,这里笔者直接用css来实现切角的样式. 切单一角: background: #58 ...
CSS 实现切角效果
最近项目中看到这样的一个切角效果,如下所示就是一个正常的矩形,然后被"切"了一块,而且是沿着右上角切的.那么,这种布局如何实现呢? 一.自适应方式这种布局一般有两种自适应方式, ...
html中切角文本框,css实现切角效果
1. 一个切角思路:如果我们要得到有一个切角的元素,我们只需要使用一个径向渐变就可以达到这个目标,这个渐变需要把一个透明色标放在切角处,然后再相同的位置设置另一个色标,并且把它的颜色设置成我们想要的 ...
css3切角文本框_[CSS揭秘]切角效果
将角切掉也是一种流行的设计风格传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果有了CSS3,我们完全可以使用新技术来实现第一种方案: CSS渐变需求一: 一个矩形需要切 ...
css3切角文本框_CSS3样式linear-gradient的使用（切角效果）
缺角效果先看效果图这是内容 .div1 { width: 100px; height: 40px; line-height: 40px; background:linear-gradient(-1 ...
css 矩形切角,特殊border的样式 -- CSS3实现三种切角效果
效果一: 代码: corner cutcorner cutcorner cutcorner cut CSS: .cornerCut{ width:200px; margin: 10px 20px; h ...
CSS实现三种切角效果
效果一: 代码: <div class="cornerCut">corner cutcorner cutcorner cutcorner cut</div> ...
CSS图片裁剪：实现切角效果
img {border: 1px gray solid;width: 400px;height: 200px;clip-path: polygon(0 20px, 100% 0, 100% 100%, ...
html中切角文本框,HTML/CSS实现切角矩形效果
非纯色背景下切角矩形的效果图如下: HTML: CSS: .top-box { position: relative; display: block; width: 90%; min-height: ...