小編給大家分享一下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%);
}

看完了這篇文章，相信你對css如何繪制斜線有了一定的了解，想了解更多相關知識，歡迎關注創新互聯行業資訊頻道，感謝各位的閱讀！

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享文章：css如何繪制斜線-創新互聯
標題路徑：http://www.yuzhuanjia.cn/article/jsscs.html