ホームページ > 記事 > ウェブフロントエンド > CSS3を使用してクールな三角形の背景画像を作成する
CSS3を使用してクールな三角形の背景画像を作成する
- 青灯夜游オリジナル
- 2021-08-20 17:10:332449ブラウズ
あなたのウェブページをより人目を引く、よりハイエンドなものにする方法は?見栄えの良い背景は必須です！次の記事では、CSS3 を使用してクールな三角形の背景画像を作成するちょっとしたコツを紹介します。これにより、Web ページが美しく実用的になります ~
タイトルにあるように、今日は主に使い方を説明します。 CSS3 を使用してクールな三角形の背景を作成する方法は、昼と夜、冬と夏など、まったく異なるオプションを表示したい場合に非常に便利です。
コードから直接始めましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
}
div {
position: absolute;
height: 100vh;
width: 100vw;
}
.day {
background-image: url("https://img.php.cn/upload/article/000/000/024/611f69e8a300f34CSS3を使用してクールな三角形の背景画像を作成する");
background-size: cover;
background-repeat: no-repeat;
}
.night {
background-image: url("https://img.php.cn/upload/article/000/000/024/611f6a067f909111.jpg");
background-size: cover;
background-repeat: no-repeat;
clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}
</style>
</head>
<body>
<div class="day"></div>
<div class="night"></div>
</body>
</script>
</body>
</html>効果は以下のとおりです:
どうですか！効果絶大じゃないですか！
上記のコードを分析しましょう:
最初に 2 つの div を作成します
<body> <div class="day"></div> <div class="night"></div> </body>
- # #次に背景を追加します
background-image
属性を使用してこれら 2 つの div に画像を追加し、background-size属性を使用して画像サイズとbackground-repeat属性設定を設定します。繰り返しなしタイル。- background-size は背景画像のサイズを指定します。値を "
cover
" に設定すると、画像の縦横比が維持され、画像は、背景の配置領域を完全にカバーする最小サイズに拡大縮小されます。
- background-size は背景画像のサイズを指定します。値を "
- 最後に、
clip-path
属性を使用して、2 番目のdivに三角形を描画します。
clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
- clip-path は css3 の新しい属性で、クリッピング パスを意味し、さまざまな幾何学図形を簡単に生成できます。 Clip-Path は特別なパスを定義することで、必要なグラフィックスを実現します。このパスは SVG のパスとまったく同じです。
- polygon() 関数: ポリゴンを定義するために使用され、グラフィックスのクリップにも使用できます。そのパラメータは一連の座標ペア (
) であり、各座標ペアは多角形の頂点の座標を表します。ブラウザは最後の頂点を最初の頂点に接続して、閉じた多角形を形成します。座標ペアはカンマで区切られ、絶対単位値またはパーセント単位値を使用できます。
css ビデオ チュートリアル 」を学習してください。
以上がCSS3を使用してクールな三角形の背景画像を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。