資料結構
網路
關係型資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用CSS建立傾斜背景
傾斜背景是一種設計效果，它在網頁或元素的背景上 tạo ra một kiểu dáng chéo hoặc nghiêng. 此效果可以使用CSS轉換來傾斜容器元素，以及其他CSS屬性，如background-color、漸變和影像來建立所需的視覺效果。
方法一：使用CSS中的transform屬性
演算法
將文件標題設定為“傾斜背景”。
定義CSS變數用於傾斜角度和背景顏色
使用CSS transform屬性設定transform屬性來傾斜背景
使用CSS background屬性設定線性漸變背景
設定傾斜背景的填充和文字顏色
新增一個帶有類名“skewed-background”的div元素作為傾斜背景
在div內新增一個h1元素，文字為“歡迎來到Tutorialspoint”
在div內新增一個p元素，文字為“這是一個使用CSS建立傾斜背景的示例”
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skewed Background</title>
<!-- Define CSS variables for skew angle and background colors -->
<style>
:root {
--skew-angle: -10deg;
--bg-color-1: #e0c3fc;
--bg-color-2: #8ec5fc;
}
/* Skew the background using the CSS transform property */
.skewed-background {
transform: skewY(var(--skew-angle));
/* Set a linear gradient background using the CSS background property */
background: linear-gradient(110deg, var(--bg-color-1) 0%, var(--bg-color-2) 100%);
padding: 50px;
color: #000000;
}
/* Set styles for the h1 and p elements inside the skewed background */
.skewed-background h1 {
font-size: 36px;
margin: 0;
}
.skewed-background p {
font-size: 18px;
margin: 20px 0 0;
}
</style>
</head>
<body>
<!-- Add a div element with the class "skewed-background" for the skewed background -->
<div class="skewed-background">
<h1>Welcome to Tutorialspoint</h1>
<p>This is an example of a skewed background using CSS</p>
</div>
</body>
</html>
方法二：使用CSS中的clip-path屬性
演算法
宣告文件標題。
將body設定為無邊距和填充。
在body內建立一個類名為“skewed-background”的div。
使用“vh”單位將div的高度設定為完整的視口高度。
使用“linear-gradient”屬性建立一個角度為110度的線性漸變背景。
使用“clip-path”屬性建立一個多邊形形狀，使背景看起來傾斜。
向div新增填充，以在內容和傾斜背景邊緣之間提供間距。
使用“display: flex”、“justify-content: center”和“align-items: center”水平和垂直居中內容。
新增標題和段落。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skewed Background using clip-path</title>
<!-- Define CSS styles for the skewed background -->
<style>
body {
margin: 0;
padding: 0;
}
.skewed-background {
height: 100vh;
background: linear-gradient(110deg, #e0c3fc 0%, #8ec5fc 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); /* Use clip-path to create a skewed shape */
padding: 50px;
color: #000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.skewed-background h1 {
font-size: 36px;
margin: 0;
}
.skewed-background p {
font-size: 18px;
margin: 20px 0 0;
}
</style>
</head>
<body>
<!-- Create a div element with the class "skewed-background" to hold the content of the skewed background -->
<div class="skewed-background">
<h1>Welcome to Tutorialspoint</h1>
<p>This is an example of a skewed background using clip-path property in CSS.</p>
</div>
</body>
</html>
方法三：使用CSS網格
演算法
使用CSS Grid定義一個包含2列1行的網格容器。
將容器的高度設定為100vh，並隱藏任何溢位的內容。
建立內容div和背景div作為容器中的兩個網格項。
將內容div定位在第一列和第一行，並將其背景顏色設定為白色，並新增文字填充。
將背景div定位在第一列和第二列以及第一行，並將其水平傾斜-12deg。
將傾斜div的背景設定為從#e0c3fc到#8ec5fc的線性漸變，並將其放置在內容div之後，z-index為-1。
向內容div新增文字，包括標題和段落，以顯示在傾斜背景之上。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skewed Background with CSS Grid</title>
<style>
/* Set margin and padding to zero */
body {
margin: 0;
padding: 0;
}
/* Create a container using CSS Grid */
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 0;
height: 100vh;
overflow: hidden;
}
/* Set properties for the content */
.container .content {
grid-column: 1/2;
grid-row: 1/2;
background: white;
padding: 20px;
z-index: 1;
position: relative;
}
/* Set properties for the background */
.container .background {
grid-column: 1/3;
grid-row: 1/2;
transform: skewX(-12deg);
background: linear-gradient(110deg, #e0c3fc 0%, #8ec5fc 100%);
z-index: -1;
position: relative;
}
</style>
</head>
<body>
<!-- Create the container and the content and background divs -->
<div class="container">
<div class="content">
<h1>Welcome to Tutorialspoint</h1>
<p>This is an example of a skewed background using CSS Grid</p>
</div>
<div class="background"></div>
</div>
</body>
</html>
方法四：使用SVG
演算法
建立一個類名為“skewed-background”的div元素來包含SVG元素
設定“skewed-background”類的CSS屬性來設定其高度、寬度、位置和溢位
在div內新增一個SVG元素，viewBox屬性設定為“0 0 500 100”，preserveAspectRatio設定為“none”
在SVG元素內新增一個path元素，其“d”屬性設定為傾斜形狀四個點的座標
設定“skewed-background svg”類的CSS屬性，將SVG元素定位到div元素的左下角，寬度和高度為100%
設定“skewed-background path”類的CSS屬性，將path的填充顏色設定為#e0c3fc
在div下方新增標題和段落元素以顯示一些文字。
示例
<!DOCTYPE html>
<html>
<head>
<title>Skewed Background using SVG</title>
<style>
/* Style for the parent container */
.skewed-background {
height: 300px;
width: 100%;
position: relative;
overflow: hidden;
}
/* Style for the SVG element */
.skewed-background svg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
/* Style for the path element */
.skewed-background path {
fill: #e0c3fc;
}
</style>
</head>
<body>
<!-- The container for the SVG element -->
<div class="skewed-background">
<!-- The SVG element that creates the skewed background -->
<svg viewBox="0 0 500 100" preserveAspectRatio="none">
<!-- The path element that creates the skewed shape -->
<path d="M 0 0 L 500 0 L 500 100 L 0 50 Z" />
</svg>
</div>
<h1>Welcome to Tutorialspoint</h1>
<p>This is an example of a skewed background using SVG.</p>
</body>
</html>
結論
但是，使用clip-path方法可能難以建立更復雜的形狀。網格間隙和溢位屬性的使用會影響佈局，可能需要調整才能達到預期的效果。以這種方式使用SVG可能會導致比其他方法更多的程式碼，並可能影響效能。
2K+ 次瀏覽
