css如何繪制斜線

小編給大家分享一下css如何繪制斜線，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

我們假定我們的 HTML 結(jié)構(gòu)如下：

<div></div>

法一、CSS3 旋轉(zhuǎn)縮放

這里我們使用 偽元素 畫出一條直線，然后繞 div 中心旋轉(zhuǎn) 45度 ，再縮放一下就可以得到。

具體實(shí)現(xiàn)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);
  }
}

法二、線性漸變實(shí)現(xiàn)

這種方法使用了背景的線性漸變實(shí)現(xiàn)，漸變背景很重要的一點(diǎn)是，雖然名字喚作漸變，但是也是可以畫出實(shí)色而非漸變色。

我們選定線性漸變的方向?yàn)?45deg，依次將漸變色值設(shè)為：transparent -> deeppink -> deeppink ->transparent。

transparent 為透明色值。

就像這樣簡單的一句，即可實(shí)現(xiàn)斜線效果：

div{
  background:
    linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);
}

看完了這篇文章，相信你對(duì)css如何繪制斜線有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！