<div 拼圖形狀是指使用HTML中的<div>標簽和CSS來創建不同形狀的圖形。通過調整<div>標簽的樣式屬性，能夠實現各種獨特的形狀效果。本文將通過幾個代碼案例，詳細解釋如何使用<div>拼出不同的圖形形狀，并參考其他文章的真實案例來說明。

案例一：創建一個三角形

.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

上述代碼中，我們給<div>標簽添加了一個名稱為"triangle"的類。通過設置<div>的寬度、高度以及邊框樣式，我們實現了一個紅色的三角形。通過調整邊框的寬度和高度，可以自定義三角形的大小。

案例二：創建一個圓形

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
}

上述代碼中，我們可以使用border-radius屬性來實現一個圓形。通過將邊框半徑設置為目標大小的一半，并設置相同的寬度和高度，我們實現了一個藍色的圓形。

案例三：創建一個扇形

.sector {
width: 0;
height: 0;
border-radius: 50%;
border-bottom: 100px solid yellow;
border-left: 50px solid yellow;
}

上述代碼中，我們使用了border-radius屬性和邊框樣式來創建一個黃色的扇形。通過調整邊框的寬度和高度，可以自定義扇形的大小和角度。

上述案例只是展示了<div>拼圖形狀的一部分可能性。實際上，通過結合使用不同的CSS樣式屬性，我們可以創造出更多獨特的形狀效果。下面是一些參考文章中的真實案例：

1. 利用<div>標簽創建花朵形狀的圖案：

.flower {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 100px solid yellow;
border-radius: 50%;
position: relative;
}
<br>
    .flower:before,
.flower:after {
content: "";
position: absolute;
top: -30px;
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 30px solid yellow;
border-left: 50px solid transparent;
border-radius: 50%;
}
<br>
    .flower:before {
left: -50px;
transform: rotate(60deg);
}
<br>
    .flower:after {
left: 50px;
transform: rotate(-60deg);
}

2. 利用<div>標簽和CSS動畫創建一個閃爍的星星：

@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<br>
    .star {
width: 50px;
height: 50px;
background-color: yellow;
position: relative;
animation: blink 1s infinite;
transform: rotate(45deg);
}
<br>
    .star:before,
.star:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 90px;
background-color: yellow;
}
<br>
    .star:before {
transform: rotate(60deg);
}
<br>
    .star:after {
transform: rotate(-60deg);
}

通過這些案例，我們可以看到<div>拼圖形狀的靈活性和創造力。通過合理運用CSS樣式屬性，我們能夠創造出各種各樣的圖形效果，為網頁設計增添了更多的樂趣和美感。