ホームページ > 記事 > ウェブフロントエンド > CSSを使用してdivの角が欠けていることを認識する方法
CSSを使用してdivの角が欠けていることを認識する方法
- 藏色散人オリジナル
- 2023-01-30 09:23:392529ブラウズ
div の角が欠落していることを認識する Css メソッド: 1. HTML サンプル ファイルを作成し、div を定義します; 2. div の幅と高さの背景色を設定します; 3. 疑似クラスを追加しますコーナーを削除する必要がある div を指定し、擬似クラスを背景色と同じ色に設定してから 45 度回転し、削除する必要があるコーナーを見つけます。
このチュートリアルの動作環境: Windows 10 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター
div を実現する方法css に角がありませんか?
div の css 実装で角がありません
最初に div を作成し、幅と高さの背景色を設定し、追加しますコーナーを削除する必要がある div に疑似クラスを追加し、疑似クラスを背景色と同じ色に設定し、45 度回転し、位置決めをオンにして、削除する必要があるコーナーを見つけます (実際には単にその隅をカバーしてください)
<body>
<div class="box"></div>
</body>.box {
position: relative;
width: 200px;
height: 200px;
background-image: linear-gradient(90deg, #333333, #666666, #999999);
overflow: hidden;
&::before {
position: absolute;
content: "";
width: 100px;
height: 100px;
right: -50px;
top: -50px;
z-index: 100;
background-color: #ffffff;
transform: rotateZ(45deg);
}
}レンダリング:
推奨される学習: 「css ビデオ チュートリアル 」
以上がCSSを使用してdivの角が欠けていることを認識する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。