CSS 斜角 div 是一種常見的設計技術，通過斜角效果可以使網頁更具有視覺沖擊力和現代感。這種效果可以用于各種元素，如標題、按鈕等。在本文中，我們將詳細解釋 CSS 斜角 div 的使用，并提供幾個代碼案例作為示例。
在 CSS 中實現斜角效果有多種方式。其中一種常見的方法是使用偽元素 (::after 或 ::before) 和 transform 屬性來實現旋轉效果。下面是一個簡單的案例，展示了如何通過 CSS 創建一個有斜角的 div：

html
<p>HTML 代碼：</p>
<pre><code><div class="slanted-div">
<p>這是一個斜角 div 的例子</p>
</div></code>

CSS 代碼：

<code>.slanted-div {
position: relative;
width: 300px;
height: 200px;
background-color: #f1f1f1;
}
<br>
.slanted-div::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-left: 200px solid transparent;
border-bottom: 200px solid #f1f1f1;
transform: skew(45deg);
}</code>

在上述代碼中，我們創建了一個 div 元素，并為其添加了一個 class 名稱 "slanted-div"。然后，在 CSS 中，我們使用偽元素 ::before 為該 div 元素添加了斜角效果。通過指定 border-left 和 border-bottom 的屬性，我們創建了一個右上方為斜角的三角形。最后，使用 transform: skew(45deg) 將該三角形旋轉 45 度，使其成為斜角。
在接下來的案例中，我們將展示如何讓斜角 div 的斜角朝向不同的方向。具體代碼如下：
html

HTML 代碼：

<code><div class="top-left-div">
<p>這是一個斜角朝上左側的 div</p>
</div>
<br>
<div class="top-right-div">
<p>這是一個斜角朝上右側的 div</p>
</div></code>

CSS 代碼：

<code>.top-left-div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-right: 200px solid transparent;
border-bottom: 200px solid #f1f1f1;
transform: skew(-45deg);
}
<br>
.top-right-div::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-left: 200px solid transparent;
border-bottom: 200px solid #f1f1f1;
transform: skew(45deg);
}</code>

在上述代碼中，我們創建了兩個不同方向的斜角 div。通過調整偽元素的位置和 transform 屬性的值，我們可以實現斜角朝不同方向的效果。.top-left-div 的偽元素的 transform 屬性的值為 skew(-45deg)，使得斜角朝上左側。.top-right-div 的偽元素的 transform 屬性的值為 skew(45deg)，使得斜角朝上右側。
通過上述案例，我們可以看到利用 CSS 斜角 div 能夠為網頁添加獨特的設計效果，使其更加現代化和吸引人。在實際應用中，可以根據實際需求調整斜角的方向、大小、顏色等屬性，以滿足不同的設計要求。希望本文提供的代碼案例能夠幫助讀者更好地理解和應用 CSS 斜角 div 技術。