css3渐变画斜线 demo

效果图：

代码：

<div class = 'demo1'></div>
<style>.demo1{width: 300px;height: 120px;border: 1px solid #000;background: linear-gradient(to left top, transparent 49.5%, red, transparent 50.5%);//调节百分比，间接设置斜线的宽度，位置，斜线方向 由左向上}
</style>

效果图:

代码：

<div class='demo2'></div>
<style>.demo2{width:300px;height:120px;border: 1px solid #000;background: linear-gradient(to top right, transparent 49.5%, red, transparent 50.5%);//调节百分比，简介设置斜线的宽度，位置，斜线方向由上向右
}
</style>

为更好的了解百分比的设置，现将.demo1的background稍作修改

 background: linear-gradient(to left top, transparent 20%, red, transparent 100%);

background: linear-gradient(to left top, transparent 20%, red, transparent 51%);

.demo2的background稍作修改

background: linear-gradient(to top right, transparent 20%, red, transparent 100%);

    background: linear-gradient(to top right, transparent 20%, red, transparent 51%);

转载于:https://www.cnblogs.com/xtping/p/7651152.html

css3渐变画斜线 demo相关推荐

html 直线斜线,css如何画斜线？
css画斜线的方法:1.通过CSS3旋转缩放实现.使用伪元素画出一条直线,然后绕div中心旋转45度并缩放即可.2.通过线性渐变实现.选定线性渐变的方向为45deg,然后设置渐变值实现. css画斜线 ...
微信小程序（4）——CSS3渐变
CSS3 渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡.CSS3 定义了两种类型的渐变(gradients): 1.线性渐变(Linear Gradients)- 向下/向上 ...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
11 - css3渐变
css3渐变鼠标样式透明度的使用以及兼容性写法(针对IE的大傻逼) 线性渐变径向渐变 ###鼠标样式(cursor) 规定当鼠标进入元素呢内容区域显示的光标类型只需要修改cursor的对应的值 ...
CSS3渐变、过渡、转换、动画
1.CSS3渐变 (1).什么是渐变 CSS3渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用CSS3渐变(gradie ...
2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特效
2023年春节祝福第二弹送你一只守护兔,让它温暖每一个你! [html5 css3]画一只会动的兔子目录一.送你一只守护兔,效果图二.前言三.代码解释及部分特效教程 (1).css3 立体字 ...
html渐变色CSS3 渐变,如何实现css3渐变色，css3渐变色怎么写
原标题:如何实现css3渐变色,css3渐变色怎么写 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS ...
WPF线性渐变画刷应用之——炫彩线条
原文:WPF线性渐变画刷应用之--炫彩线条效果图: Xaml代码: <Rectangle Width="800" Height="10"> < ...
GDI+ 学习记录(11): 路径渐变画刷 - PathGradientBrush
为什么80%的码农都做不了架构师?>>> //路径渐变画刷 varg: TGPGraphics;path: TGPGraphicsPath;pb: TGPPathGradien ...
ios 三种颜色画笔和橡皮擦的画图板demo
demo功能:三种颜色画笔和橡皮擦的画图板demo [iphone 6.1 测试通过] demo说明:项目中PaintView.m 是demo的画板部分,PaintView和三个颜色按钮添加到View ...

css3渐变画斜线 demo

css3渐变画斜线 demo相关推荐

最新文章

热门文章