使用一个div实现5个圆环

最新推荐文章于 2021-09-28 10:47:27 发布
最新推荐文章于 2021-09-28 10:47:27 发布
阅读量1.3k 收藏 3
点赞数 3
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwwqiaoling/article/details/105544990
版权

使用一个div实现5个圆环


面试的时候遇到了一个考察css的题，觉得挺有意思的，来记录一波：
题目：

怎么实现以下这张图片的效果？不许用图片，不许用svg。

在这里插入图片描述

我：(⊙o⊙)… 我当时的回答是可以div嵌套，emmmm…好像有点low啊，，，
面试官提示：能不能用一个div实现呢？
我：(⊙o⊙)…我只知道背景色和border可以设置颜色，那也只有两个环，，，
面试官：你可以想想盒模型中，哪些属性可以设置背景色的
我：(⊙o⊙)…border和margin
面试官：这俩可以设置颜色吗？？？你确定？？
我：(⊙o⊙)…不能设置颜色，我再想想，，
面试官又提示：伪元素了解吗？
我：(⊙o⊙)…before和after吗？
面试官：对哦，他们是块级的还是什么？
我：块儿级的
面试官：那他们可以设置宽高吗？可以设置颜色吗？
我：(⊙o⊙)…好像可以
面试官：那你现在可以有几个环了
我：四个？？
面试官：好吧，这个不纠结了，你可以再去研究一下。
我：凉。。。。。

最低0.47元/天 解锁文章
巧兔兔
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【html5/css3】css圆环的六种实现方式
Umbrella_Um的博客
06-15 2387
效果图： html <div class="circle1">第一种方法</div> <div class="circle2">第二种方法</div> <div class="circle3"> <div class="circle_3">第三种方法</div> </div> <div class="circle4">第四种方法</div> <div class="circ
实现圆环进度条的三种方式 div svg canvas
05-02
实现圆环进度条的三种方式 div svg canvas 可加qq群：179916551 免积分获取，沟通交流
css：如何做一个圆环？
1111111111
08-10 508
1、div里面再放一个div <div class="title-icon-chart"> <div class="inner"> </div> </div> 2、外层的div设置为圆形，并且设置它内部的元素垂直和水平都居中，小圆的半径设置为大圆的一半，这样比较美观，小圆的背景色跟页面背景色一致。 .title-icon-chart{ width: 16px; height: 16px; bor
div元素呈圆环排列
diankui6178的博客
09-21 798
<style> .path { width: 300px; height: 300px; padding: 20px; border-radius: 50%; background: rgba(79, 11, 152, 0.5);; margin: 50px auto; } .avatar { width: 50px...
前端知识总结--css用div画环形圆
a82022424的博客
05-07 906
如何用最少的div画最多的环形？如下图所示最少需要多少个div? 暂时想到的利用div的边框、内外阴影及befor和after的伪元素实现 以下代码可以实现上图效果： <style> div{ height: 100px; width: 100px; border-radius: 100px; ...
div css圆环布局,CSS圆环样式
weixin_34798552的博客
08-04 863
文/王乐生最近重新开始接触CSS，挑战了一下用CSS代码拼出这样的一个效果。先附上效果图css圆环效果图HTML代码块CSS代码块.bigCircle{width: 10px;height: 10px;border: 1px solid #999999;border-radius: 50%;}.solidRing{width: 8px;height: 8px;background: #999999...
三个圆环重叠切换特效代码
03-20
通过修改元素的CSS属性，如`transform`（用于平移、旋转等变换）和`transition`（定义动画过渡效果），可以实现圆环的滑动切换。可能还会使用到`requestAnimationFrame`或者CSS3的`animation`属性来实现流畅的动画...
实现CSS圆环的5种方法(小结)
09-22
这是最基础的方法，通过一个大圆（外层div）和一个小圆（内层div）来形成圆环效果。外层div设置背景色和50%的圆角，内层div设置相对定位，偏移量为圆半径的一半，颜色与外层不同。这样，小圆就会出现在大圆内部，...
vue中使用echarts制作圆环图的实例代码
12-29
vue使用echarts制作圆环图，代码如下所示： <div id=main></div> [removed] export default { //从父组件中接收到的数据 props:{ chartT:{ type:Object, required:true } }, data () { return { charts:...
基于javascript实现按圆形排列DIV元素(二)
10-20
通过这种方式，我们可以用JavaScript实现一个动态的、按圆形排列的DOM元素效果，使页面元素呈现出优雅的动画效果。这个方法不仅适用于圆形布局，还可以扩展到其他几何形状，只需要调整计算坐标的方式即可。
圆形div圆圈div
08-13
圆形div,Jquery特效.
一个div只用CSS最多能画多少个圆？
张木期的博客
09-19 1369
暂时想到的利用div的边框、内外阴影及befor和after的伪元素实现，画6个圆，以后想到再补充： <style> div{ height: 100px; width: 100px; border-radius: 100px; position: absolute; top: 40%; ...
html圆环旋转效果,css3 div实现三维立体圆环旋转效果
weixin_34556619的博客
06-03 1109
圆环最好设计为扫描特效，转起来会很有感觉1、首先创建一个div 2、css样式.companydiV{position: absolute;top: -130px;/* left: 80px; */transform: skewY(0) rotateZ(88deg) rotateX(8deg) rotateY(-79deg);}3、css3动画@keyframes rollI...
div如何变成圆形
热门推荐
『愚』的博客
11-12 1万+
有时候我们会有把div变成圆形的需求。 用下面的语句就可以了↓ border-radius: 50%; 样例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #d1{ width:100px; height: 100px; background-color: #6495ED; border-radius: 50%;
使用CSS3写圆环加载动画
u010837861的博客
10-26 5393
第一次在CSDN写文章，请各位看客将就哦，如有哪里不足请尽管提，本人会有责改之哒~ 功能介绍： 红色沿着灰色弧运动，并填满。如下图： 实现技术点： 1.先画两个圆，一个灰色，一个红色; 2.使用样式遮罩mask的 radial-gradient把圆的中间截掉，并且截掉的部分是透明的，最终成弧； 3.对红色圆使用clip-path: polygon(point1,point2,point3,poi...
html怎么把div弄成圆圈,一个div实现一个圆的关闭按钮
weixin_28994357的博客
05-30 961
一个div实现一个圆的关闭按钮小僧去面试的时候被问到的一个问题，主要就是考察css3的功底，所谓难者不会，会者不难，我也来试试。原理如下利用css3的伪元素 :before :after利用css3的转换角度 transform: rotate(90deg);代码如下：html代码css代码.close{width: 30px;height: 30px;background: #fff;posit...
实现两个圆嵌套
zoezoezoezoe1234的博客
09-28 929
方法一：伪元素实现定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现两个圆嵌套</title> </head> <style> #box{ height: 200px; width: 200px; border-radius: 50%; background-co
6、如何实现一个环形的进度条
abuanden的博客
02-26 958
实现方法一、DIV + CSS3二、SVG 一、DIV + CSS3 这个是最基本的实现方式，我在想怎样用尽量少的DOM结构来实现，最终还是用了三个div，不过这个方法仅供开阔思路，样式表现在PC还好，手机上的问题就多了，仅供参考。 1、利用div的border画一个背景的圆环 <div class="demo1-bg1"></div> /* css */ .demo1-bg1{ width: 100px; height: 1
html css画中空圆圈,实现CSS圆环的5种方法(小结)
weixin_31995467的博客
05-30 5359
想到去年面试实习的时候被问到实习圆环的问题，特意写篇文章总结一下吧！总结了一下大概有5种方法。1. 两个标签的嵌套：.element1{width: 200px;height: 200px;background-color: lightpink;border-radius: 50%;}.child1{width: 100px;height: 100px;border-radius: 50%;bac...
将一个div变成圆环
最新发布
05-26
可以使用 CSS 的 border-radius 属性和伪元素来将一个 div 变成圆环。具体实现方法如下： HTML 代码： ```html <div class="circle"></div> ``` CSS 代码： ```css .circle { border: 2px solid #ccc; /* 设置边框样式和颜色 */ border-radius: 50%; /* 将边框设置为圆形 */ width: 100px; /* 设置宽度 */ height: 100px; /* 设置高度 */ position: relative; /* 设置相对定位 */ } .circle::before { content: ""; /* 添加伪元素 */ display: block; /* 将伪元素设置为块级元素 */ border: 2px solid #ccc; /* 设置边框样式和颜色 */ border-top-color: transparent; /* 将上边框透明 */ border-right-color: transparent; /* 将右边框透明 */ border-radius: 50%; /* 将边框设置为圆形 */ width: 60px; /* 设置宽度 */ height: 60px; /* 设置高度 */ position: absolute; /* 设置绝对定位 */ top: 50%; /* 设置顶部偏移量为一半高度 */ left: 50%; /* 设置左侧偏移量为一半宽度 */ transform: translate(-50%, -50%) rotate(45deg); /* 将伪元素旋转45度，并向左上方平移50%的宽度和高度 */ } ``` 解释一下代码： 首先，我们将 div 的 border-radius 设置为 50%，这样就可以将它变成一个圆形。 然后，我们使用伪元素 ::before 来创建圆环的一部分。我们将它的宽度和高度设置为比 div 小，这样就可以看到 div 的边框。我们将伪元素旋转了 45 度，并向左上方平移了 50% 的宽度和高度，这样就可以让它看起来像一个圆环的一部分。 最后，我们将伪元素设置为绝对定位，使它可以相对于 div 定位，并使用 top 和 left 属性将它居中。我们还将上边框和右边框设置为透明，这样就可以隐藏掉伪元素的一部分边框。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值