単一ラベルを使用して、次の図に示すスラッシュ効果を実現する方法。つまり、CSSを使用してスラッシュを描画するにはどうすればよいでしょうか?
HTML 構造は次のとおりであると仮定します:
方法 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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
