您现在的位置是：网站首页> 编程资料编程资料

CSS八等分圆的实现示例_CSS教程_CSS_网页制作_

2023-11-04 210人已围观

简介这篇文章主要介绍了CSS八等分圆的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

简介

对于CSS的练习介绍如何绘制八等分的圆。

问题1 主要思路

这个地方的主要思路是将一个八等分的圆分成两部分。左边和右边的圆分别用半圆旋转而得。

1 注意：每个半圆最后要用外面的外包矩形切一下详见#lfet #right
2 右边旋转的圆顺序不一样后面的可能会遮挡前面的要么顺序要对，要么使用z-index

问题2 重点代码

1 半圆和圆

 .circle-left{ width: 100px;height: 200px; border-radius: 0px 100px 100px 0px; position: absolute; right: 0; transform-origin: 0 50%; } .circle-right{ width: 100px;height: 200px; border-radius: 100px 0px 0px 100px ; position: absolute; right: 0; transform-origin: 100% 50%; } #circle0{ width: 200px;height: 200px; border-radius: 100px;background-color: yellowgreen; position: relative; }

上面采用的是border-radius实现圆和半圆

2 将半圆切整齐

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

使用clip属性将其切整齐

clip只有一种值rect(a,b,c,d)

代码：

CSS等分圆

截图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：Web标准:结构,表现和行为分离_Web标准教程_CSS_网页制作_

下一篇：崩坏学园2武器流派介绍_手机游戏_游戏攻略_

您现在的位置是：网站首页> 编程资料编程资料

CSS八等分圆的实现示例_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢