CSS 是前端開發中不可或缺的一個重要組成部分，它可以讓我們的網頁樣式更加美觀和獨特。今天我們來講一下如何用 CSS 寫一個六邊形的頭像。

.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.avatar:before {
content: "";
display: block;
padding-top: 100%;
}
.avatar img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 100%;
height: 100%;
transform: rotate(30deg) skew(25deg);
}

首先，我們需要設置頭像的寬度和高度為 100px，并將邊框半徑設置為 50%，這樣就可以得到一個圓形的頭像。

接著，我們需要為頭像添加一個偽元素:before，并設置其內容為空、顯示為塊級元素，并設置一個 padding-top 屬性，讓其寬高比為 1:1。

最后，我們利用絕對定位和 transform 屬性來旋轉和傾斜頭像，使其形成一個六邊形的效果。

通過以上的 CSS 代碼，我們就能夠輕松地實現一個六邊形的頭像了。當然，如果你對顏色、邊框等方面有更多的想法，也可以繼續優化代碼，讓頭像更加獨特和個性化。