Vue 绘制圆形上下左右

最新推荐文章于 2024-09-30 16:19:08 发布

Y青阳

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量778

点赞数 1

分类专栏：前端文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/qq_40216244/article/details/141558500

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果图

代码：

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