绘制五边形和六边形
2020-01-31 本文已影响0人
钢笔先生
Time: 20200131
绘制图形的套路就是，先拆分，然后再画基本的元素，考虑如何用旋转，变形完成。
最基础的就是如何绘制三角形，这也是相对来说比较难的一个点。
五边形的拆解
截屏2020-01-31下午9.47.01.png
拆分为一个三角形和一个梯形。
梯形还可以再拆分，但是我们可以直接画出梯形来。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>五边形</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="pentagon"></div>
</body>
</html>
CSS
#pentagon {
/* 先画三角形 */
width: 0px;
height: 0px;
margin: 150px auto;
border-top: 0px solid red;
border-bottom: 100px solid red;
border-left: 160px solid transparent;
border-right: 160px solid transparent;
position: relative;
}
/* 再画梯形 */
#pentagon::before {
content: '';
width: 260px;
height: 0px;
position: absolute; /*相对于主元素绝对位置*/
border-top: 160px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
top: 100px;
left: -160px;
}
显示效果
截屏2020-01-31下午10.05.14.png
六边形
拆分为三角形 + 正方形 + 三角形。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>六边形</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="hexagon"></div>
</body>
</html>
CSS
#hexagon {
width: 0px;
height: 0px;
margin: 150px auto;
border-bottom: 100px solid red;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
position: relative;
}
/* 正方形 */
#hexagon::before {
content: '';
width: 300px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: -150px;
}
#hexagon::after {
content: '';
width: 0px;
height: 0px;
margin: 150px auto;
border-top: 100px solid red;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
position: absolute;
left: -150px;
top: 50px;
}
总之，用CSS3画了这么一堆东西，都是在练习使用拆解 + 基本元素绘制，变形，旋转，位置设定，伪元素等综合使用。
显示效果：
截屏2020-01-31下午10.26.48.png
END.
