css怎么绘制斜线
导读： 我们假定我们的HTML结构如下： 法一、CSS3旋转缩放 这里我们使用伪元素画出一条直线，然后绕div中心旋转45度，再缩放一下就可以得到。 具体实现css代码: div{ posi...
我们假定我们的HTML结构如下：
法一、CSS3旋转缩放
这里我们使用伪元素画出一条直线，然后绕div中心旋转45度，再缩放一下就可以得到。
具体实现css代码:
div{
position:relative;
margin:50pxauto;
width:100px;
height:100px;
box-sizing:border-box;
border:1pxsolid#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:1pxsoliddeeppink;
transform-origin:bottomcenter;
//transform:rotateZ(45deg)scale(1.414);
animation:slash5sinfiniteease;
}
@keyframesslash{
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,transparent49.5%,deeppink49.5%,deeppink50.5%,transparent50.5%);
}
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css怎么绘制斜线
本文地址： https://pptw.com/jishu/664831.html