电话
13363039260
css怎么绘制斜线
2024-01-18 10:13 小编
我们假定我们的HTML结构如下：
<div></div>
法一、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%);
}
猜你喜欢
联络方式：
13363039260
微信二维码 