css+html實現基本幾何元素：多邊形、圓、橢圓、直線
阿新 • • 發佈：2019-01-26
用canvas可以輕易地畫出各種幾何元素，貼圖當然更簡單。不過，用css也有用css的好處，比如說容易修改等。
效果如下：
（部分程式碼只考慮了webkit）
一、四邊形
四邊形當然最簡單了，因為塊狀元素本來就是個四邊形嘛。下面用<div>實現。
先設定一下背景色之類的東西：
.geom
{
background: blue;
margin: 50px;
float: left;
}正方形：
div#square
{
width: 100px;
height: 100px;
}長方形：
div#rectangle { width: 100px; height: 50px; }
平行四邊形（用到了css3的transform中的skew）：
div#parallelogram
{
width: 100px;
height: 50px;
-webkit-transform: skew(20deg);
} div#diamond
{
width: 100px;
height: 100px;
-webkit-transform: scale(0.5, 1) rotate(45deg);
}梯形，這個比較難，利用的是border屬性拐角處平分的性質：
div#trapezoid { height: 0; width: 100px; background-color: transparent; border-bottom: 100px solid blue; border-left: 50px solid transparent; border-right: 20px solid transparent; }
其實還有另一種方法，可能不如上一種好，就是利用css3的3d效果，遠小近大，可以形成看上去的梯形，我在這裡就不寫了。
二、三角形
其實對之前的梯形稍作改動即可：
div#triangle { height: 0; width: 0; background-color: transparent; border-bottom: 100px solid blue; border-left: 30px solid transparent; border-right: 70px solid transparent; -webkit-transform: rotate(30deg); }
三、任意多邊形
稍有幾何知識的人都知道任意多邊形都可以分割成若干個三角形，所以我們有了三角形，也就有了任意多邊形。
舉個例子，正六邊形：
#hexagon
{
background-color: transparent;
}
#hexagon div
{
position: absolute;
height: 0;
width: 0;
background-color: transparent;
border-bottom: 43px solid blue;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
#hexagon div:nth-child(1)
{
-webkit-transform: translate(0, 21px);
}
#hexagon div:nth-child(2)
{
-webkit-transform: rotate(60deg) translate(0, 21px);
}
#hexagon div:nth-child(3)
{
-webkit-transform: rotate(120deg) translate(0, 21px);
}
#hexagon div:nth-child(4)
{
-webkit-transform: rotate(180deg) translate(0, 21px);
}
#hexagon div:nth-child(5)
{
-webkit-transform: rotate(240deg) translate(0, 21px);
}
#hexagon div:nth-child(6)
{
-webkit-transform: rotate(300deg) translate(0, 21px);
}四、圓與橢圓
用到border-radius屬性：
#circle
{
height: 100px;
width: 100px;
border-radius: 50px;
}
#ellipse
{
height: 100px;
width: 100px;
border-radius: 50px;
-webkit-transform: scale(1, 0.5);
}五、直線
直接用<hr>標籤即可
hr
{
width: 200px;
height: 3px;
}
hr:last-child
{
-webkit-transform: rotate(30deg);
}六、完整程式碼
<html>
<head>
<style>
.geom
{
background: blue;
margin: 70px;
float: left;
}
div#square
{
width: 100px;
height: 100px;
}
div#rectangle
{
width: 100px;
height: 50px;
}
div#parallelogram
{
width: 100px;
height: 50px;
-webkit-transform: skew(20deg);
}
div#diamond
{
width: 100px;
height: 100px;
-webkit-transform: scale(0.5, 1) rotate(45deg);
}
div#trapezoid
{
height: 0;
width: 100px;
background-color: transparent;
border-bottom: 100px solid blue;
border-left: 50px solid transparent;
border-right: 20px solid transparent;
}
div#triangle
{
height: 0;
width: 0;
background-color: transparent;
border-bottom: 100px solid blue;
border-left: 30px solid transparent;
border-right: 70px solid transparent;
-webkit-transform: rotate(30deg);
}
#hexagon
{
background-color: transparent;
}
#hexagon div
{
position: absolute;
height: 0;
width: 0;
background-color: transparent;
border-bottom: 43px solid blue;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
#hexagon div:nth-child(1)
{
-webkit-transform: translate(0, 21px);
}
#hexagon div:nth-child(2)
{
-webkit-transform: rotate(60deg) translate(0, 21px);
}
#hexagon div:nth-child(3)
{
-webkit-transform: rotate(120deg) translate(0, 21px);
}
#hexagon div:nth-child(4)
{
-webkit-transform: rotate(180deg) translate(0, 21px);
}
#hexagon div:nth-child(5)
{
-webkit-transform: rotate(240deg) translate(0, 21px);
}
#hexagon div:nth-child(6)
{
-webkit-transform: rotate(300deg) translate(0, 21px);
}
#circle
{
height: 100px;
width: 100px;
border-radius: 50px;
}
#ellipse
{
height: 100px;
width: 100px;
border-radius: 50px;
-webkit-transform: scale(1, 0.5);
}
hr
{
width: 200px;
height: 3px;
}
hr:last-child
{
-webkit-transform: rotate(30deg);
}
</style>
</head>
<body>
<div id = "square" class = "geom"></div>
<div id = "rectangle" class = "geom"></div>
<div id = "parallelogram" class = "geom"></div>
<div id = "diamond" class = "geom"></div>
<div id = "trapezoid" class = "geom"></div>
<div style="clear:both"></div>
<div id = "triangle" class = "geom"></div>
<div id = "hexagon" class = "geom">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id = "circle" class = "geom"></div>
<div id = "ellipse" class = "geom"></div>
<hr class = "geom"/>
<hr class = "geom"/>
</body>
</html>