今天面试面试官问到一个问题，如何绘制一个圆形，并在圆形中绘制三等分扇形,第一反应要用到三角函数，但是毕业多年三角函数已经忘完了，平时开发也没用到。回来以后查了一下也没找到比较好用的方法，想了一下找到一个比较简单的方法。
- 其实主要绘制一个90度扇形，我们知道只需要修改一个角度弧度就可以，但是绘制一个120度的扇形的话就可能需要用到三角函数然后绘制一个平行四边形去截取其中一部分。
- 这里我用到的思路就是绘制两个九十度的扇形，然后第一个不变，第二个让他沿着圆形的中心点进行旋转对应的角度，就可以达到想要的效果 可能不是很优雅，但是算是完成了面试官的问题，二话不说直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 200px;height: 200px;border-radius: 50%;background-color: pink;position: relative;">
<!-- 第一个 -->
<div
style="width: 100px;height: 100px;background-color: red;border-radius: 100px 0 0 0;left: 0;top: 0;position: absolute;">
</div>
<div
style="width: 100px;height: 100px;background-color: red;border-radius: 100px 0 0 0;left: 0;top: 0;position: absolute;transform: rotate(30deg);transform-origin: right bottom;">
</div>
<!-- 第二个 -->
<div
style="width: 100px;height: 100px;background-color: yellow;border-radius: 100px 0 0 0;left: 0;top: 0;position: absolute;transform: rotate(120deg);transform-origin: right bottom;">
</div>
<div
style="width: 100px;height: 100px;background-color: yellow;border-radius: 100px 0 0 0;left: 0;top: 0;position: absolute;transform: rotate(150deg);transform-origin: right bottom;">
</div>
<!-- 第三个 -->
<div
style="width: 100px;height: 100px;background-color: green;border-radius: 100px 0 0 0;left: 0;top: 0;position: absolute;transform: rotate(240deg);transform-origin: right bottom;">
</div>
<div
style="width: 100px;height: 100px;background-color: green;border-radius: 100px 0 0 0;left: 0;top: 0;position: absolute;transform: rotate(270deg);transform-origin: right bottom;">
</div>
</div>
</body>
</html>
效果图
