CSSで斜めの線を引く方法

単一ラベルを使用して、次の図に示すスラッシュ効果を実現する方法。つまり、CSSを使用してスラッシュを描画するにはどうすればよいでしょうか?

HTML 構造は次のとおりであると仮定します:

<div></div>

方法 1、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);
  }
}

方法 2、線形グラデーションの実装

このメソッドでは、背景の線形グラデーションの実装を使用します。グラデーション背景はとても重要な点は、名前はグラデーションと呼ばれていますが、グラデーション色の代わりに単色を描画することもできるということです。

線形グラデーションの方向を 45 度に選択し、グラデーション カラー値を透明 -> ディープピンク -> ディープピンク -> 透明に設定します。

transparent は透明色の値です。

次のような単純な文でスラッシュ効果を実現できます:

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

以上がCSSで斜めの線を引く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。