效果图

代码：

      <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;
                        }
                    }