在HTML中，div是一種常見的塊級元素，用于組織和布局網頁上的不同內容。div可以通過添加樣式來改變其外觀和形狀。本文將介紹一些常見的div形狀，以及如何使用HTML和CSS來實現它們。

1. 正方形

<p><div class="square"></div></p>
<p>/* CSS樣式 */</p>
<p>.square {</p>
<p>  width: 200px;</p>
<p>  height: 200px;</p>
<p>  background-color: red;</p>
<p>}</p>

上述代碼表示一個寬度和高度均為200像素，背景顏色為紅色的正方形。通過設置div的寬度、高度和背景顏色樣式屬性，可以輕松地創建一個正方形的div。

2. 圓形

<p><div class="circle"></div></p>
<p>/* CSS樣式 */</p>
<p>.circle {</p>
<p>  width: 200px;</p>
<p>  height: 200px;</p>
<p>  background-color: blue;</p>
<p>  border-radius: 50%;</p>
<p>}</p>

上述代碼展示了如何使用border-radius屬性將一個div元素變為一個圓形。通過設置div的寬度、高度和邊框半徑為50%的樣式屬性，可以創建一個圓形的div。

3. 橢圓形

<p><div class="ellipse"></div></p>
<p>/* CSS樣式 */</p>
<p>.ellipse {</p>
<p>  width: 300px;</p>
<p>  height: 200px;</p>
<p>  background-color: green;</p>
<p>  border-radius: 50% / 100%;</p>
<p>}</p>

上述代碼展示了如何使用border-radius屬性將一個div元素變為一個橢圓形。通過設置div的寬度、高度和邊框半徑屬性為50% / 100%，可以創建一個寬高比為3:2的橢圓形的div。

4. 三角形

<p><div class="triangle"></div></p>
<p>/* CSS樣式 */</p>
<p>.triangle {</p>
<p>  width: 0;</p>
<p>  height: 0;</p>
<p>  border-left: 100px solid transparent;</p>
<p>  border-right: 100px solid transparent;</p>
<p>  border-bottom: 100px solid orange;</p>
<p>}</p>

上述代碼演示了如何使用div的邊框屬性以及透明邊框來創建一個三角形。通過設置div的寬度和高度為0，以及調整邊框屬性，可以用div元素創建各種形狀的三角形。

來說，HTML和CSS的組合使用可以創建各種形狀的div。通過設置div的寬度、高度、背景顏色或邊框屬性，可以讓div呈現不同的形狀，如正方形、圓形、橢圓形和三角形等。這為網頁設計提供了更多的樣式選擇，使得網頁更加豐富和多樣化。