站長資訊網如何讓你的網頁更吸引眼球，更有高級感？一個好看的背景是不可缺少的！下面本篇文章就來分享一種利用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/611f69e8a300f343.jpg"); 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>
效果如下圖所示：
怎么樣！效果是不是很棒！
下面我們來分析一下上面的代碼：
-
首先創建兩個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()函數：用于定義一個多邊形，也可以用來剪裁圖形。它的參數是一組坐標對（<shape-arg> <shape-arg>），每一個坐標對代表多邊形的一個頂點坐標。瀏覽器會將最后一個頂點和第一個頂點連接得到一個封閉的多邊形。坐標對使用逗號來進行分隔，可以使用絕對單位或百分比單位值。
PHP中文網平臺有非常多的視頻教學資源，歡迎大家學習《css視頻教程》！
