CSS div多邊形邊框

在Web開發中，有時候需要使用多邊形邊框來美化網頁。CSS可以實現這點，本文將介紹如何使用CSS div元素來創建多邊形邊框。

實現方法

首先，我們需要使用CSS的transform屬性來旋轉div元素。transform-origin屬性可以用來設置旋轉中心，使我們可以沿著三角形的邊框來設置旋轉中心。

.triangle {  
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;  
transform: rotate(45deg);  
transform-origin: 50% 50%;
}

這個例子可以創建一個等邊直角三角形。我們通過設置三角形的高度和寬度為0，同時設置底部的邊框為100px。最后，我們使用rotate(45deg)旋轉45度來實現直角三角形效果。

更多多邊形

當然，以上只是一個例子。我們可以根據需求創建更多的多邊形，比如六邊形、五邊形等等。

.hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
margin: 50px auto;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 27.5px solid red;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 27.5px solid red;
}

這里的例子是一個六邊形。我們先創建一個正方形，然后使用:before和:after偽元素來創建三角形。我們將:before元素放置在正方形的頂部，寬度設置為0，然后設置邊框即可。同理，我們將:after元素放置在正方形的底部，同樣設置寬度為0，然后設置邊框。