CSS 畫線性六邊形 畫線性六邊形可以通過CSS的transform屬性和偽元素實現。首先，我們需要定義一個正六邊形，然后對其進行調整和變形。使用rotate將正六邊形旋轉30度，使用scale縮放其高度，使其變為一個六邊形。 代碼如下：

.hexagon {
position: relative;
width: 100px;
height: 100px;
background-color: transparent;
transform: rotate(30deg) scale(.86, .5);
}
.hexagon:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: solid 1px #000;
z-index: -1;
transform: rotate(-60deg);
}

這里我們使用偽元素:before，通過rotate(-60deg)將其旋轉60度，達到六邊形的效果。同時設置z-index屬性，將偽元素放在正六邊形的后面，使其顯示出邊框。 接下來，我們可以通過在六邊形兩端繪制三角形來實現線性六邊形。 代碼如下：

.hexagon {
position: relative;
width: 100px;
height: 100px;
background-color: transparent;
transform: rotate(30deg) scale(.86, .5);
}
.hexagon:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: solid 1px #000;
z-index: -1;
transform: rotate(-60deg);
}
.hexagon:after{
content: '';
position: absolute;
top: -9%;
left: -50%;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #000;
}
.hexagon:before{
content: '';
position: absolute;
bottom: -9%;
left: -50%;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #000;
}

我們使用偽元素:after和:before，在正六邊形的上下兩端繪制了兩個相等的三角形。通過設置border-width來實現，需要設置border-left和border-right的寬度，border-top/bottom的寬度并沒有實際意義，只是為了占位而已。 這樣，我們就成功地實現了線性六邊形的繪制。可以通過控制六邊形的大小和邊框顏色來實現不同風格的線性六邊形。