溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“如何利用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>），每一個坐標對代表多邊形的一個頂點坐標。瀏覽器會將最后一個頂點和第一個頂點連接得到一個封閉的多邊形。坐標對使用逗號來進行分隔，可以使用絕對單位或百分比單位值。
“如何利用CSS3創建三角背景圖像”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
