php 绘制斜线,css怎么绘制斜线

使用单个标签，如何实现下图所示的斜线效果。也就是如何使用 CSS 画斜线？

我们假定我们的 HTML 结构如下：

法一、CSS3 旋转缩放

这里我们使用伪元素画出一条直线，然后绕 div 中心旋转 45度，再缩放一下就可以得到。

具体实现css代码:div{

position:relative;

margin:50px auto;

width:100px;

height:100px;

box-sizing:border-box;

border:1px solid #333;

// background-color:#333;

line-height:120px;

text-indent:5px;

}

div::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:50px;

box-sizing:border-box;

border-bottom:1px solid deeppink;

transform-origin:bottom center;

// transform:rotateZ(45deg) scale(1.414);

animation:slash 5s infinite ease;

}

@keyframes slash{

0%{

transform:rotateZ(0deg) scale(1);

}

30%{

transform:rotateZ(45deg) scale(1);

}

60%{

transform:rotateZ(45deg) scale(1.414);

}

100%{

transform:rotateZ(45deg) scale(1.414);

}

法二、线性渐变实现

这种方法使用了背景的线性渐变实现，渐变背景很重要的一点是，虽然名字唤作渐变，但是也是可以画出实色而非渐变色。

我们选定线性渐变的方向为 45deg，依次将渐变色值设为：transparent -> deeppink -> deeppink ->transparent。

transparent 为透明色值。

就像这样简单的一句，即可实现斜线效果：div{

background:

linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);

}

php 绘制斜线,css怎么绘制斜线相关推荐

html 直线斜线,css如何画斜线？
css画斜线的方法:1.通过CSS3旋转缩放实现.使用伪元素画出一条直线,然后绕div中心旋转45度并缩放即可.2.通过线性渐变实现.选定线性渐变的方向为45deg,然后设置渐变值实现. css画斜线 ...
怎么在CAD表格中画斜线？CAD表格斜线一分为二绘制步骤
在Excel表格中经常能看到用一条斜线将单元格一分为二,那么,你知道怎么在CAD表格中画斜线吗?本文小编就以浩辰CAD软件为例来给大家分享一下CAD表格斜线一分为二的绘制步骤,一起来看看吧! CAD表 ...
三角形css_纯 CSS 实现绘制各种三角形（各种角度）
转载至:纯 CSS 实现绘制各种三角形(各种角度) 一.前言三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red, ...
纯 CSS 实现绘制各种三角形（各种角度）
纯 CSS 实现绘制各种三角形(各种角度) 一.前言三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的 ...
前端怎么画三角形_WEB前端-CSS三角形绘制方法
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)
HTML+CSS+svg绘制精美彩色闪灯圣诞树, HTML+CSS+Js实时新年时间倒数倒计时(附源代码) 本篇目录一.前言二.主要功能三.效果展示四.编码实现步骤五.资源下载六.完整源代 ...
css+vue绘制蛇形时间轴曲线
蛇形时间轴线图绘制本人在之前的项目中(vue项目),由于业务需求根据设计图自行利用css样式绘制了一个简单的时间轴线图,可自适应收缩并且左右来回循环,在某些方面可满足大部分的需求,并且添加了图例,特 ...
html样式border倒三角写法,纯CSS - border绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
干货分享|巧用CSS滤镜绘制安卓手机充电动效(uni-app|view组件版)
前言 CSS3的滤镜真的是一个非常强大的功能,如果我们能够很好的利用它,并充分发挥我们的想象力,想要制作出非常惊艳的动效也是没有问题的哦.比如:接下来我要跟大家分享的一个巧妙使用CSS滤镜绘制出来的a ...

php 绘制斜线,css怎么绘制斜线

php 绘制斜线,css怎么绘制斜线相关推荐

最新文章

热门文章