HTML5如何把圆分成六等分,CSS八等分圆的实现示例_CSS教程_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等分圆
.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;
}
#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(180deg);
}
#circle7{
background-color: #ff2121;
transform: rotate(225deg);
}
#circle8{
background-color: #16a951;
transform: rotate(270deg);
}
#circle9{
background-color: #e0eee8;
transform: rotate(315deg);
}
#left{
clip: rect(0px 100px 200px 0px);
position: absolute;
right: 0px;
width: 100px;
height: 200px;
overflow: hidden;
}
#right{
clip: rect(0px 100px 200px 0px);
position: absolute;
left: 0px;
width: 100px;
height: 200px;
overflow: hidden;
}
截图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。
HTML5如何把圆分成六等分,CSS八等分圆的实现示例_CSS教程_CSS相关推荐
- [css] 请使用css画一个圆,方法可以多种
[css] 请使用css画一个圆,方法可以多种 <div class="circle"></div>1.border-radius.cirlce{width ...
- 批量画同心不同半径圆lisp_【微课视频】青岛版数学六年级上册5.1圆的认识
六年级微课堂专注六年级微课堂,每日推送学习资料. 语/数/英(上册)电子课本请点击上图▲ 微课探路 微课视频第一课时 微课视频第二课时 课本再现 巩固练习 答案:1.曲线:圆心,两端,圆上:半径. 2 ...
- Html中圆圈怎么画,css怎么画圆?
css怎么画圆?其实很简单.我们需要使用一个关键属性:border-radius属性来画圆.下面本篇文章就来给大家介绍一下使用CSS border-radius属性画圆的方法,希望对大家有所帮助. 首 ...
- HTML5游戏引擎(十六)-屏幕适配——showAll模式 noScale模式 noBorder模式 exactFit模式 fixedWidth模式 fixedHeight模式
HTML5游戏引擎(十六)-屏幕适配--showAll模式 & noScale模式 & noBorder模式 & exactFit模式 & fixedWidth模式 & ...
- C语言,n条直线最多能将圆分成多少个区域
在一个圆上画n条直线,问最多能将圆分成多少个区域? 输入 每行一个整数,表示画n条直线,输入遇到-1结束. 输出 每行输出一个整数,为对应测试样例的答案. 要想把圆分成的块数最多,那么增加的每一条线都 ...
- 怎么用计算机编写圆的面积,圆的面积教学反思八篇
圆的面积教学反思八篇 篇一:<圆的面积>教学反思 "圆的面积"是在学生掌握了面积的含义及长方形.正方形等平面图形的面积计算方法,认识了圆,会计算圆的周长的基础上进行教学 ...
- html hover 效果,CSS八种让人眼前一亮的HOVER效果的示例代码
一.发送效果HTML // 这里是一个svg的占位 Send CSS #send-btn{ display: flex; align-items: center; justify-content: c ...
- java左手画圆右手画方_左手画圆右手画方900字作文
左手画圆右手画方900字作文 圆,亦始亦终,柔曲多变. 方,公平公正,有棱,有角,有个性. 方与圆,不只是形状,亦是两种性格,两种态度,两种人生. 方的人脾气耿直,公正严苛: 圆的人机智多变,善于处世 ...
- CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局完全指南(图解 Grid 详细教程) CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就 ...
- 【计算机图形学】小白谈计算机图形学(二)画圆篇之中点画圆法,Bresenham画圆算法,椭圆实操,线型处理详解
小白谈计算机图形学(二)画圆篇之中点画圆法,Bresenham画圆算法,椭圆实操,线型处理详解 引言 如何画圆 基本思想 中点画圆法 中点画圆基本思路 中点画圆改进 Bresenham画圆算法 Bre ...
最新文章
- 基于OpenCV的直方图匹配
- 百度股价接连暴涨的背后,看Apollo的2020
- boost::describe模块实现pp_call的测试程序
- Hadoop随笔(一)
- 抢先看!Kubernetes v1.21 新特性一览
- 算法学习之路|最小生成树——prime算法
- python发送文件到邮箱_python 发送附件至邮箱
- 关于transformer是如何处理图像的
- python语言能做什么-Python是什么_python能做什么
- 小型 web 服务器系统,小型WEB服务器 - 应用服务器是什么_应用服务器有哪些
- js-JavaScript常见的创建对象的几种方式
- 机器人对话系统的单轮对话和多轮对话
- oracle建表语句
- 8G的U盘变成4M解决方法
- xxl-job源码解读:调度器schedule
- 三重积分平均值_二重积分或者三重积分里面如果积分区域关于坐标轴对称比如积分区域是一个圆或者球,就只用求第一象限或卦...
- 在学习计算机编程不写代码_使用代码创建:通过制作游戏来学习和教授计算机编程
- 《嵌入式 - Lwip开发指南》第5章 LWIP测速
- 新鸟文章:foreach里的Sqlcommand(有SqlTransaction)
- 给0-2 岁孩子的书单