Vue 绘制圆形 上下左右

效果图

代码：

      <div style="transform: rotate(45deg)"><div id="top"><div id="top-left" @click="addformData(true, form.lat, 0.000003, 'lat')"><ArrowUpBold style="height: 25px; width: 25px; transform: rotate(-45deg) translateY(20px)" /></div><div id="top-right" @click="addformData(true, form.lng, 0.000003, 'lng')"><ArrowRightBold style="height: 25px; width: 25px; transform: rotate(-45deg) translateX(-5px) translateY(15px)" /></div></div><div id="bottom"><div id="bottom-left" @click="addformData(false, form.lng, 0.000003, 'lng')"><ArrowLeftBold style="height: 25px; width: 25px; transform: rotate(-45deg) translateX(5px) translateY(15px)" /></div><div id="bottom-right" @click="addformData(false, form.lat, 0.000003, 'lat')"><ArrowDownBold style="height: 25px; width: 25px; transform: rotate(-45deg) translateY(10px)" /></div></div></div>

CSS

  .hc-track-pannel_from {#top-left {margin-right: 5px;margin-bottom: 5px;width: 50px;height: 50px;color: white;background-color: #00c0b7;border-radius: 100% 0 0 0;}#top-right {margin-bottom: 5px;width: 50px;height: 50px;color: white;background-color: #00c0b7;border-radius: 0 100% 0 0;}#bottom-right {width: 50px;height: 50px;color: white;background-color: #00c0b7;border-radius: 0 0 100% 0;}#bottom-left {margin-right: 5px;width: 50px;height: 50px;color: white;background-color: #00c0b7;border-radius: 0 0 0 100%;}#top {display: flex;}#bottom {display: flex;}}