CSS3 的新增特性為我們帶來了很多更加靈活多樣的設計選擇，其中五角形就是其中之一。

.pentagon {
width: 0;
height: 0;
border-bottom: 100px solid #f1c40f;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
position: relative;
}
.pentagon:before {
content: "";
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 70px solid white;
position: absolute;
left: -50px;
top: 15px;
}

上面的代碼展示了如何利用 CSS3 的五角形制作一個黃色的五角形，其中用到了 border 屬性、position 屬性以及 ::before 偽元素。

其中border-bottom: 100px solid #f1c40f;用于確定底部三角形的黃色部分，border-left: 50px solid transparent; border-right: 50px solid transparent;則用于確定其左右兩側的透明三角形。

而::before偽元素的作用則是在五角形的底部添加一個白色三角形，使其看起來更加完整。這個三角形也利用了 border 屬性的形狀特性，不過與五角形相比其高度較小。

這是一個簡單但實用的 CSS3 技巧，可以讓網頁設計更加富有創意和多樣性。