CSS3を使用してクールな三角形の背景画像を作成する-CSSチュートリアル-php.cn

CSS3を使用してクールな三角形の背景画像を作成する

青灯夜游

リリース： 2021-08-23 12:05:44

オリジナル

2483 人が閲覧しました

あなたのウェブページをより人目を引く、よりハイエンドなものにする方法は?見栄えの良い背景は必須です！次の記事では、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>

ログイン後にコピー

効果は以下のとおりです:

CSS3を使用してクールな三角形の背景画像を作成する

どうですか！効果絶大じゃないですか！

上記のコードを分析しましょう:

最初に 2 つの div を作成します

<body>
  <div class="day"></div>
  <div class="night"></div>
</body>

ログイン後にコピー

# #次に背景を追加します
background-image 属性を使用してこれら 2 つの div に画像を追加し、background-size 属性を使用して画像サイズと background-repeat 属性設定を設定します。繰り返しなしタイル。
- background-size は背景画像のサイズを指定します。値を "
  cover" に設定すると、画像の縦横比が維持され、画像は、背景の配置領域を完全にカバーする最小サイズに拡大縮小されます。
最後に、
clip-path 属性を使用して、2 番目の div に三角形を描画します。

 clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);

ログイン後にコピー

clip-path は css3 の新しい属性で、クリッピングパスを意味し、さまざまな幾何学図形を簡単に生成できます。 Clip-Path は特別なパスを定義することで、必要なグラフィックスを実現します。このパスは SVG のパスとまったく同じです。
polygon() 関数: ポリゴンを定義するために使用され、グラフィックスのクリップにも使用できます。そのパラメータは一連の座標ペア ( ) であり、各座標ペアは多角形の頂点の座標を表します。ブラウザは最後の頂点を最初の頂点に接続して、閉じた多角形を形成します。座標ペアはカンマで区切られ、絶対単位値またはパーセント単位値を使用できます。

css ビデオチュートリアル」を学習してください。

以上がCSS3を使用してクールな三角形の背景画像を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。