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%);
 
  }


Tag: 怎么
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码