CSS怎么寫多個(gè)六邊形
在CSS中，我們可以使用shape-outside屬性來繪制多個(gè)六邊形，這個(gè)屬性接受一個(gè)函數(shù)作為參數(shù)，這個(gè)函數(shù)描述了形狀的外輪廓，對于六邊形，我們可以使用polygon()函數(shù)來定義其六個(gè)邊。
下面是一個(gè)示例代碼，展示了如何繪制多個(gè)六邊形：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
position: relative;
}
.hexagon {
width: 100px;
height: 57.74px;
position: absolute;
top: 0;
left: 0;
transform-origin: 50% 100%;
transform: rotate(-30deg);
}
.hexagon:before, .hexagon:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 34.64px;
}
.hexagon:before {
border-color: transparent transparent transparent #007bff;
top: -34.64px;
left: -25px;
}
.hexagon:after {
border-color: #007bff transparent transparent transparent;
top: -34.64px;
right: -25px;
}
</style>
</head>
<body>
<div class="container">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
</body>
</html>在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為hexagon的類，用于繪制單個(gè)六邊形，我們在container中重復(fù)添加hexagon元素來繪制多個(gè)六邊形，每個(gè)hexagon元素都使用transform屬性進(jìn)行旋轉(zhuǎn)，以在容器中排列它們。
版權(quán)聲明：除非特別標(biāo)注，否則均為本站原創(chuàng)文章，轉(zhuǎn)載時(shí)請以鏈接形式注明文章出處。
