css怎麼繪製斜線

使用單一標籤，如何實現下圖所示的斜線效果。也就是如何使用 CSS 畫出斜線？

我們假定我們的 HTML 結構如下：

<div></div>

法一、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怎麼繪製斜線的詳細內容。更多資訊請關注PHP中文網其他相關文章！