CSS实现任意角度扇形
CSS 实现 任意 角度 扇形
2023-09-11 14:19:54 时间
参考之前思路:conic-gradient
:圆锥形渐变存在兼容性问题,无法使用,要不然其实实现效果也蛮好的
<div class="precoss">
<div class="skew"></div>
</div>
.precoss{
width 26px
height 26px
border:2px solid rgba(22,143,202,1);
border-radius:50%;
margin-right 10px
position relative
overflow hidden
font-size 0
.skew{
position absolute
top -1px
left -1px
width 28px
height 28px
border-radius: 50%;
background: conic-gradient(#168fca 0, #168fca 50%, #fff 50%, #fff 100%);
}
}
所以放弃,只能自己手写,参考第2种思路
<div class="precoss" v-if="item.progress <= 50">
<div class="skew1"></div>
<div class="skew2" :style="{'transform': `rotate(${item.progress*3.6}deg)`}"></div>
</div>
<div class="precoss" v-else>
<div class="skew1" :style="{'transform': `rotate(${(item.progress - 50)*3.6}deg)`}"></div>
<div class="skew2 per50"></div>
</div>
css如下
.precoss{
width 30px
height 30px
border-radius 50%
background #168fca
position relative
margin-right 10px
.skew1{
background-color: #ffffff;
width: 26px;
height: 26px;
border-radius: 50%;
clip:rect(0,13px,auto,0);
position: absolute;
top 2px
left 2px
}
.skew2{
background-color: #ffffff;
width: 26px;
height: 26px;
border-radius: 50%;
clip:rect(0,auto,auto,13px);
position: absolute;
top 2px
left 2px
&.per50{
background-color: #168fca;
width: 28px;
height: 28px;
top 1px
}
}
}
因为存在超过50%情况,所以简单的做了一个判断。
效果:
相关文章
- css - text-shadow
- 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正 wpf Listbox 实现按住ctrl键来取消选中 详解C#的协变和逆变 C#效率优化(1)-- 使用泛型时避免装箱
- css实现文本缩略显示
- CSS 奇思妙想边框动画
- 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法
- 【Css/小程序】如何实现div或view中的文字左右居中和垂直居中?(已解决:多行和单行自适应)
- CSS - 移动端容器背景大图片自动适应屏幕
- css+js实现兼容性select的样式
- 【前端学习之HTML&CSS进阶篇】-- CSS第二篇 -- 块级格式化上下文与堆叠上下文
- Day7:html和css
- 如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画
- 在css中,可以使用white-space属性和word-break属性来设置字符超出宽度就自动换行输出。下面小编举例讲解用DIV+CSS实现字符超出宽度就自动换行输出。
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 1.2 网页的基本构成元素
- 《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 第02章 HTML基本标记
- css实现加入购物车动画(水平抛物线)
- [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
- 浅析使用css实现可拉伸调整尺寸的分栏布局:基本实现原理、自定义resize容器范围、实际应用
- CSS学习---css基础知识0105
- 借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海
- CSS实现9宫格布局的4种方法:flex、float、grid、table布局
- C#实现winform仿div+css半透明遮罩效果
- css图片水平、垂直居中方案
- 商城分类导航实现 (css)