首頁 > 文章 > web前端 > 利用CSS3創造酷炫的三角背景影像

利用CSS3創造酷炫的三角背景影像

青灯夜游原創: 2021-08-20 17:10:332446瀏覽

如何讓你的網頁更吸引眼球，更有高級感？一個好看的背景是不可缺少的！以下這篇文章就來分享一種利用CSS3創建酷炫的三角背景圖像的小技巧，讓你的網頁兼美麗與實用於一體~

正如標題所言我們今天主要帶大家了解使用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/611f69e8a300f34利用CSS3創造酷炫的三角背景影像");
  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創造酷炫的三角背景影像

怎麼樣！效果是不是很棒！

下面我們來分析一下上面的程式碼：

先建立兩個div

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

#然後分別給這兩個div使用
background-image屬性新增背景圖片，並使用background-size屬性設定圖片大小、background-repeat屬性設定不重複平鋪。
- background-size指定背景圖片大小，當值設為「
  cover」時，將保持影像的縱橫比並將影像縮放成將完全覆蓋背景定位區域的最小大小。
最後給第二個
div使用clip-path屬性畫出三角形。

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

clip-path是css3的新屬性，意義裁切路徑的意思，讓我們可以很便捷的產生各種幾何圖形。 clip-path 透過定義特殊的路徑，實現我們想要的圖形。而這個路徑，正是 SVG 中的 path 。
polygon()函數：用來定義一個多邊形，也可以用來剪裁圖形。它的參數是一組座標對（），每一個座標對代表多邊形的一個頂點座標。瀏覽器會將最後一個頂點和第一個頂點連接得到一個封閉的多邊形。座標對使用逗號來進行分隔，可以使用絕對單位或百分比單位值。

PHP中文網路平台有非常多的影片教學資源，歡迎大家學習《

css影片教學》！

以上是利用CSS3創造酷炫的三角背景影像的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：手把手教你使用css為文字加上火焰效果（程式碼詳解）下一篇：手把手教你使用css為文字加上火焰效果（程式碼詳解）

看更多