css设置八等分圆

于 2023-07-26 11:28:03 发布
阅读量1.5k 收藏 4
点赞数 1
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44801790/article/details/131923258
版权

在这里插入图片描述
现需要上图样式的布局，我通过两张向右方的图片，通过定位和旋转完成了布局。在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

问题：
由于是通过旋转获取到的样式，实际的盒子是一个长方形，当鼠标移入对应的箭头时选中的可能是其他盒子，如第一张设计稿可以看出，先需要移入对应块添加事件。

解决方法： 又画了一个圆，将圆平分成8等分通过css样式覆盖保证移入时能移入对应的块。然后覆盖到原本的环形块上，背景透明就可以看到想要的效果和实现事件。设计中心空白不能点击，多添加一个小圆环覆盖。
在这里插入图片描述
参考地址：https://blog.csdn.net/yatsov/article/details/81590011

八等分圆代码

<!DOCTYPE html>
<html>
<head>
    <title>CSS等分圆</title>
    <meta charset="utf-8">
    <style type="text/css">

        .circle-left{
            width: 62.5px;height: 125px;
            border-radius: 0px 62.5px 62.5px 0px;
            position: absolute;
            right: 0;
            transform-origin: 0 50%;
        }

        .circle-left:hover{
          background-color: yellowgreen !important;
        }
        .circle-right{
            width: 62.5px;height: 125px;
            border-radius:  62.5px 0px 0px 62.5px ;
            position: absolute;
            right: 0;
            transform-origin: 100% 50%;
        }
        #circle0{
            width: 125px;
            height: 125px;
            border-radius: 62.5px;
            background-color: yellowgreen;
            position: relative;
            transform: rotate(-22.5deg);
        }
         #circle2{
            background-color: #70f3ff;
        }
         #circle3{
            background-color: #ff461f;
            transform: rotate(45deg);
        }
        #circle4{
            background-color: #bce672;
            transform: rotate(90deg);
        }
        #circle5{
            background-color: #ffffff;
            transform: rotate(135deg);
        }
         #circle6{
            background-color: #3b2e7e;
            transform: rotate(-135deg);
        }
         #circle7{
            background-color: #ff2121;
            transform: rotate(270deg);
        }
         #circle8{
            background-color: #16a951;
            transform: rotate(315deg);
        }
        #circle9{
            background-color: #e0eee8;
            transform: rotate(45deg)
        }
        #left{
            clip: rect(0px 62.5px 125px 0px);
            position: absolute;
            right: 0px;
            width: 62.5px;
            height: 125px;
            overflow: hidden;
        }
        #right{
            clip: rect(0px 62.5px 125px 0px);
            position: absolute;
            left: 0px;
            width: 62.5px;
            height: 125px;
            overflow: hidden;
        }
    </style>
</head>
<body>

    <div id="circle0">
        <div id="left">
            <div class="circle-left" id="circle2">1</div>
            <div class="circle-left" id="circle3">2</div>
            <div class="circle-left" id="circle4">3</div>
            <div class="circle-left" id="circle5">4</div>
        </div>
        <div id="right">
            <div class="circle-right" id="circle9">6</div>
            <div class="circle-right" id="circle8">7</div>
            <div class="circle-right" id="circle7">8</div>
            <div class="circle-right" id="circle6">9</div>
        </div>
    </div>
</body>
</html>
``

## 实际业务样式代码
```vue
<template>
  <div class="control">
    <!-- 加add 减subtract -->
    <div class="control_img_box" title="关闭声音">
      <img src="@/assets/image/vol.png" alt="">
    </div>
    <div class="control_img_box" title="进入全屏">
      <img @click="screenfull" src="@/assets/image/full.png" alt="">
    </div>
    <div class="control_img_box" @click="setCameraControl" title="云台控制器">
      <img src="@/assets/image/control.png" alt="">
    </div>

    <!-- 云台控件 摄像头控制 -->
    <div class="camera-control" v-show="isShowCameraControl">
      <div class="camera-control-left flex">
        <div class="content-box">
          <!-- 拼接辅助线 -->
          <!-- <div class="line1"></div>
          <div class="line2"></div> -->
          <!-- 展示圆环 -->
          <div class="img-box" :class="'img-box'+(i+1)" v-for="(url,i) in imgArr" :key="i">
            <img @mouseenter="handleMouseEnter(i)" @mouseleave="handleMouseLeave(i)" :src="url" alt="">
          </div>
          <!-- 绑定事件的透明圆环 -->
          <div id="circle0">
            <div id="left">
              <div class="circle-left" @mouseenter="handleMouseEnter(1)" @mouseleave="handleMouseLeave(1)" id="circle2"></div>
              <div class="circle-left" @mouseenter="handleMouseEnter(2)" @mouseleave="handleMouseLeave(2)" id="circle3"></div>
              <div class="circle-left" @mouseenter="handleMouseEnter(3)" @mouseleave="handleMouseLeave(3)" id="circle4"></div>
              <div class="circle-left" @mouseenter="handleMouseEnter(4)" @mouseleave="handleMouseLeave(4)" id="circle5"></div>
            </div>
            <div id="right">
              <div class="circle-right" @mouseenter="handleMouseEnter(8)" @mouseleave="handleMouseLeave(8)" id="circle9"></div>
              <div class="circle-right" @mouseenter="handleMouseEnter(7)" @mouseleave="handleMouseLeave(7)" id="circle8"></div>
              <div class="circle-right" @mouseenter="handleMouseEnter(6)" @mouseleave="handleMouseLeave(6)" id="circle7"></div>
              <div class="circle-right" @mouseenter="handleMouseEnter(5)" @mouseleave="handleMouseLeave(5)" id="circle6"></div>
            </div>
            <div class="center"></div>
          </div>
        </div>
      </div>
      <div class="camera-control-right">
        <div class="btn-list">
          <div>变焦</div>
          <div class="btn-box">
            <div class="flex" @click="toZoom('add')">
              <img src="@/assets/image/add.png" alt="">
            </div>
            <div class="flex" @click="toZoom('minus')">
              <img src="@/assets/image/minus.png" alt="">
            </div>
          </div>
        </div>
        <div class="btn-list">
          <div>缩放</div>
          <div class="btn-box">
            <div class="flex" @click="toScale('add')">
              <img src="@/assets/image/add.png" alt="">
            </div>
            <div class="flex" @click="toScale('minus')">
              <img src="@/assets/image/minus.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import img from '@/assets/image/arrows.png'
import img2 from '@/assets/image/arrows21.png'
export default {
    name: '',
    components: {},
    props: [],
    data() {
        return {
            isShowCameraControl: false,
            imgArr: [img, img, img, img, img, img, img, img],
        }
    },
    mounted() {},
    methods: {
        handleMouseEnter(i) {
            this.$set(this.imgArr, i - 1, img2)
        },
        handleMouseLeave(i) {
            this.$set(this.imgArr, i - 1, img)
        },
        setCameraControl() {
            this.isShowCameraControl = !this.isShowCameraControl
        },
        screenfull() {
            this.$emit('screenfull')
        },
        toScale(str) {
            console.log('缩放', str)
        },
        toZoom(str) {
            console.log('变焦', str)
        }
    }
}
</script>
<style lang='scss' scoped>
.control {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    padding: 15px 7px;
    display: flex;
    justify-content: flex-end;

    &_img_box {
        cursor: pointer;
        padding: 10px 10px 6px;
        margin-right: 10px;
        background: linear-gradient(162deg, rgba(3, 33, 120, 0.9) 0%, rgba(3, 33, 120, 0.4) 100%);
        border-radius: 3px;
        opacity: 1;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(18, 106, 205, 1), rgba(11, 87, 173, 0)) 1 1;

        > img {
            width: 20px;
            height: 20px;
        }
    }

    .camera-control {
        position: absolute;
        display: flex;
        top: -150px;
        right: 16px;
        padding: 6px 10px;
        width: 319px;
        height: 150px;
        background: linear-gradient(to bottom right, #032078ab 30%, #0b57ad60 100%);

        > div {
            flex: 1;
        }
        &-left {
            .content-box {
                position: relative;
                width: 125px;
                height: 125px;
                border-radius: 50%;
                background: url('@/assets/image/circle.png');
                background-size: 125px 125px;

                .circle-left {
                    width: 62.5px;
                    height: 125px;
                    border-radius: 0px 62.5px 62.5px 0px;
                    position: absolute;
                    right: 0;
                    transform-origin: 0 50%;
                }
                .circle-right {
                    width: 62.5px;
                    height: 125px;
                    border-radius: 62.5px 0px 0px 62.5px;
                    position: absolute;
                    right: 0;
                    transform-origin: 100% 50%;
                }
                #circle0 {
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    width: 125px;
                    height: 125px;
                    border-radius: 62.5px;
                    position: relative;
                    transform: rotate(-22.5deg);

                    .center {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                    }
                }

                #circle3 {
                    transform: rotate(45deg);
                }
                #circle4 {
                    transform: rotate(90deg);
                }
                #circle5 {
                    transform: rotate(135deg);
                }
                #circle6 {
                    transform: rotate(-135deg);
                }
                #circle7 {
                    transform: rotate(270deg);
                }
                #circle8 {
                    transform: rotate(315deg);
                }
                #circle9 {
                    transform: rotate(45deg);
                }

                #left {
                    clip: rect(0px 62.5px 125px 0px);
                    position: absolute;
                    right: 0px;
                    width: 62.5px;
                    height: 125px;
                    overflow: hidden;
                }
                #right {
                    clip: rect(0px 62.5px 125px 0px);
                    position: absolute;
                    left: 0px;
                    width: 62.5px;
                    height: 125px;
                    overflow: hidden;
                }

                .line1 {
                    position: absolute;
                    width: 125px;
                    height: 2px;
                    background: red;
                    left: 50%;
                    margin-left: -62.5px;
                    top: 50%;
                    margin-top: -1px;
                    z-index: 999;
                }

                .line2 {
                    position: absolute;
                    left: 50%;
                    margin-top: -62.5px;
                    top: 50%;
                    margin-left: -1px;
                    width: 2px;
                    height: 125px;
                    background: red;
                    z-index: 999;
                }

                .img-box {
                    // width: 54px;
                    // height: 58px;
                    position: absolute;

                    // > img {
                    //     width: 54px;
                    //     height: 58px;
                    // }
                }

                .img-box1 {
                    left: 31px;
                    top: -14px;
                    transform: rotate(-90deg);
                }

                .img-box2 {
                    left: 64px;
                    top: -2px;
                    transform: rotate(-45deg);
                }

                .img-box3 {
                    left: 79px;
                    top: 29px;
                    transform: rotate(0deg);
                }

                .img-box4 {
                    left: 67px;
                    top: 62px;
                    transform: rotate(46deg);
                }

                .img-box5 {
                    left: 36px;
                    top: 77px;
                    transform: rotate(90deg);
                }

                .img-box6 {
                    left: 4px;
                    top: 66px;
                    transform: rotate(135deg);
                }

                .img-box7 {
                    left: -12px;
                    top: 35px;
                    transform: rotate(-180deg);
                }

                .img-box8 {
                    left: -1px;
                    top: 2px;
                    transform: rotate(-135deg);
                }
            }
        }

        &-right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-weight: bold;
            color: #a5c3ff;

            .btn-list {
                display: flex;
                align-items: center;
                margin: 12px 0px;
            }
            .btn-box {
                width: 70px;
                height: 32px;
                margin-left: 12px;
                background: linear-gradient(180deg, #009afc 0%, #003cb1 100%);
                box-shadow: inset 0px 2px 4px 0px #08ebff, 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
                border-radius: 2px;
                border: 1px solid #0e2977;
                display: flex;

                > div {
                    width: 35px;
                    height: 32px;
                    cursor: pointer;
                    > img {
                        width: 16px;
                        height: 16px;
                    }
                }
            }
        }
    }
}
</style>
浮桥
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用CSS对光盘进行切片和切块
CSS 初学者指南
06-28 442
我最近遇到了一个有趣的切片光盘设计。 圆盘有一个对角线渐变，并被分成水平的切片，从左到右有些偏移。 自然地，我开始思考用CSS做到这一点的最有效方法是什么。 切片的梯度圆盘。 首先想到的是，这应该可以在border-radius ，对吗？ 好吧，不！ 具有border-radius的东西是它创建了一个椭圆形的角，其末端与所连接的边缘相切 。 我的第二个想法是使用circle()剪...
css圆等分,CSS八等分圆的实现示例
weixin_29002935的博客
08-04 986
简介对于CSS的练习介绍如何绘制八等分的圆。问题1 主要思路这个地方的主要思路是将一个八等分的圆分成两部分。左边和右边的圆分别用半圆旋转而得。1 注意：每个半圆最后要用外面的外包矩形切一下 详见#lfet #right2 右边旋转的圆顺序不一样后面的可能会遮挡前面的要么顺序要对，要么使用z-index问题2 重点代码1 半圆和圆.circle-left{width: 100px;height: 2...
css3 圆盘时钟,使用css3绘制一个圆形动态的时钟
weixin_39565910的博客
08-03 297
钟表#wrap {width: 200px;height: 200px;border: 2px solid #000;margin: 100px auto;border-radius: 50%;position: relative;}#wrap ul {margin: 0;padding: 0;height: 200px;position: relative;list-style: none;}#...
CSS3八等分圆的写法
weixin_53926064的博客
03-05 918
CSS3八等分圆的写法 因为要写一个小的案例，所以在网上找了很多8等分圆的写法，但是没有遇到一个合适的，dom元素都不是很好控制，所以自己总结了一下的写法，不足之处请多指正，我立马改。 css代码 ： { margin: 0; padding: 0; } .c1 { width: 0; border: 200px solid transparent; border-top-color: #ffc0cb; border-left: none; border-bottom: none; transform-
只用html和css画出不等分圆盘，不用canvas
weixin_33971205的博客
09-13 186
<style> .box{height: 200px;width: 200px;border-radius: 100%; overflow: hidden; margin: 200px; position: relative; } .tests{ ...
CSS八等分圆的实现示例
01-19
简介 对于CSS的练习介绍如何绘制八等分的圆。 问题1 主要思路 这个地方的主要思路是将一个八等分的圆分成两部分。左边和右边的圆分别用半圆旋转而得。 1 注意：每个半圆最后要用外面的外包矩形切一下 详见#lfet #right 2 右边旋转的圆顺序不一样后面的可能会遮挡前面的要么顺序要对，要么使用z-index 问题2 重点代码 1 半圆和圆 .circle-left{ width: 100px;height: 200px; border-radius: 0px 100px 100px 0px; position:
CSS等分圆
⑧o年崋日常记录
12-04 675
<!DOCTYPE html> <html> <head> <title>CSS等分圆</title> <meta charset="utf-8"> <style type="text/css"> .container{ position: relative; width: 200px; height: 200px; overflow: hidden; border: 2px o
CSS把圆分八等份
jack_rose_me的博客
12-03 2738
简介 对于CSS的练习介绍如何绘制八等分的圆。 问题1 主要思路 这个地方的主要思路是将一个八等分的圆分成两部分。左边和右边的圆分别用半圆旋转而得。 1 注意：每个半圆最后要用外面的外包矩形切一下 详见#lfet #right 2 右边旋转的圆顺序不一样后面的可能会遮挡前面的要么顺序要对，要么使用z-index 问题2 重点代码 1 半圆和圆 .circle-left{ width: 100px;height: 200px; border
css圆切成4等分做边角效果，丿的弧形效果、半月等效果。
qq_43426246的博客
03-31 846
画半月和凹陷样式的css、一个简单的css样式例子
css制作三分圆形效果
09-27
"三分圆形效果"是一种巧妙的视觉设计，它将一个圆形分割成三个等分的部分，每个部分都可以独立控制颜色或内容，常用于导航菜单、进度条或者装饰元素。本文将深入探讨如何使用CSS来实现这一效果。 首先，我们来理解...
DIV手工打造云台控制组件，适用场景广泛。八方向云台控制，近焦远焦控制，放大缩小控制html5 CSS.zip
最新发布
10-19
DIV手工打造云台控制组件，适用场景广泛。八方向云台控制，近焦远焦控制，放大缩小控制html5 CSS.zip
bootstrap五等分代码CSS和圆形按钮css
04-27
bootstrap五等分代码CSS和圆形按钮css，讲文档添加到bootstrap.css的最后直接写class即可。非常好用
CSS3产品分类对比评论样式代码
07-31
CSS3可以用于设置这些元素的样式，如圆角头像、渐变背景、评分星标等。同时，利用`transition`和`animation`可以为鼠标悬停、点击等交互添加动态效果。 4. **JS**（JavaScript）：JavaScript在本代码中主要负责动态...
html5+css3实现圆分成四个扇形，并有点击事件
12-15
】做一个圆:周围4个扇形，有点击事件（html5+css3实现扇形），html5+css3实现圆分成四个扇形，并有点击事件。使用的是vue，但是可以提取为html+css，自己提取
html把圆形分成10份,如何使用css3 / javascript将圆圈分成12个相等的部分
weixin_30478241的博客
06-29 1235
这可以使用CSS转换完成1)对于12个相等的切片,每个切片角度将为30度.2)我们需要根据垂直轴和切片开始之间的角度旋转每个切片.因此第一个切片将旋转0度,最后一个切片旋转330度3)此外,我们需要将每个切片倾斜减去(90度 – 切片角度)在这种情况下,它是 – (90deg – 30deg)= skewY(-60deg)4)关于案文：a)我们需要用skewY(60deg)去掉切片内容b)为了使文...
css绘制八方向云台 环形按钮盘
凉酱的博客
11-24 3871
翻了很多帖子，最终基于https://blog.csdn.net/zhangtff/article/details/89458797的文章，使用css绘制出八方向用来控制摄像机等的按钮盘，于此记录。 效果图大致如下图，用到的图片还没找美工做，自己随便找的。 用到了一个圆形背景图片，一个向上的箭头图片，一个回复图片。 代码部分如下 <template> <el-card class="box-card"> <ul class='pie'>
让若干个元素自适应均匀的分散排列成一个圆形
helloaqr的博客
02-01 660
js/css让若干个元素自适应均匀的排列在圆形上
将圆分割为多个扇形
qq_39831234的博客
11-13 864
<!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>扇形</titl
HTML5如何把圆分成六等分,CSS八等分圆的实现示例_CSS教程_CSS
weixin_29100399的博客
06-26 1746
简介对于CSS的练习介绍如何绘制八等分的圆。问题1 主要思路这个地方的主要思路是将一个八等分的圆分成两部分。左边和右边的圆分别用半圆旋转而得。1 注意：每个半圆最后要用外面的外包矩形切一下 详见#lfet #right2 右边旋转的圆顺序不一样后面的可能会遮挡前面的要么顺序要对，要么使用z-index问题2 重点代码1 半圆和圆.circle-left{width: 100px;height: 2...
css把圆圈分成5个扇形
07-30
要将一个圆圈分成五个扇形，可以使用CSS的伪元素和旋转变换来实现。首先，创建一个圆形容器，并设置其宽度和高度相等，以达到圆形的效果。接下来，使用CSS的伪元素`::before`和`::after`来创建五个扇形。 给容器设置`position: relative;`，以便在伪元素中使用绝对定位。为了区分扇形，可以使用不同的背景颜色或边框样式。示例如下： ```css .circle { position: relative; width: 200px; height: 200px; border-radius: 50%; } .circle::before, .circle::after { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 50%; border-radius: 100% 100% 0 0; } /* 第一个扇形 */ .circle::before { background-color: red; transform-origin: bottom right; transform: rotate(0deg); } /* 第二个扇形 */ .circle::after { background-color: blue; transform-origin: bottom left; transform: rotate(72deg); } /* 第三个扇形 */ .circle::before { background-color: yellow; transform-origin: top left; transform: rotate(144deg); } /* 第四个扇形 */ .circle::after { background-color: green; transform-origin: top right; transform: rotate(216deg); } /* 第五个扇形 */ .circle::before { background-color: orange; transform-origin: bottom center; transform: rotate(288deg); } ``` 这样，一个由五个等分扇形组成的圆圈就可以实现了。可以根据实际需求，自行调整扇形的样式和颜色。注意，`transform-origin`属性用于设置旋转的基点，通过调整旋转角度实现扇形的分割。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值