html5 css3 如何绘制扇形任意角度
2024-10-14 18:37:37
扇形制作原理，底部一个纯色原形，里面2个相同颜色的半圆，可以是白色,内部半圆按一定角度变化，就可以产生出扇形效果
<html>
<head>
<meta charset="UTF-8">
<title>扇形绘制</title>
<style>
.shanxing{
position: relative;
width: 200px;
height: 200px;
border-radius: 100px;
background-color: yellow;
}
.sx1{
position: absolute;
width: 200px;
height: 200px;
transform: rotate(0deg);
clip: rect(0px,100px,200px,0px); /*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
border-radius: 100px;
background-color: #f00;
/*-webkit-animation: an1 2s infinite linear; */
} .sx2{
position: absolute;
width: 200px;
height: 200px;
transform: rotate(0deg);
clip: rect(0px,100px,200px,0px);
border-radius: 100px;
background-color: #f00;
/*-webkit-animation: an2 2s infinite linear;*/
}
/*绘制一个60度扇形*/
.shanxing1 .sx1{transform: rotate(-30deg);}
.shanxing1 .sx2{transform: rotate(-150deg);} /*绘制一个85度扇形*/
.shanxing2 .sx1{transform: rotate(-45deg);}
.shanxing2 .sx2{transform: rotate(-140deg);} /*绘制一个向右扇形，90度扇形*/
.shanxing3 .sx1{transform: rotate(45deg);}
.shanxing3 .sx2{transform: rotate(-45deg);} /*绘制一个颜色扇形 */
.shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;}
.shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;} /*绘制一个不同颜色半圆夹角 */
.shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;}
.shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;}
</style>
</head> <body> 扇形制作原理，底部一个纯色原形，里面2个相同颜色的半圆，可以是白色,内部半圆按一定角度变化，就可以产生出扇形效果
<p>/*绘制一个60度扇形*/</p>
<div class="shanxing shanxing1">
<div class="sx1"></div>
<div class="sx2"></div>
</div>
<p>/*绘制一个85度扇形*/</p>
<div class="shanxing shanxing2">
<div class="sx1"></div>
<div class="sx2"></div>
</div>
<p>/*绘制一个向右扇形，90度扇形*/</p>
<div class="shanxing shanxing3">
<div class="sx1"></div>
<div class="sx2"></div>
</div>
<p>/*绘制一个颜色扇形 */</p>
<div class="shanxing shanxing4">
<div class="sx1"></div>
<div class="sx2"></div>
</div> <p>/*绘制一个不同颜色半圆夹角 */</p>
<div class="shanxing shanxing5">
<div class="sx1"></div>
<div class="sx2"></div>
</div> </body>
</html>
最新文章
- io.sort.spill.percent调整
- 双击vbs时，默认cscript运行脚本
- 【MySQL】InnoDB: Error: checksum mismatch in data file 报错
- 武林[HDU1107]
- js encodeURI方法认识
- AS3事件流机制
- 获取 UIWebView中用户所点击的图片URL
- Sicily 1299 Academy Awards （map + vector）集装箱
- 如何对软件开发工具 WebBuilder 进行安装？
- 微信小程序的网络设置，及网络请求：wx.request(OBJECT)
- Spring之DAO一
- Go实现海量日志收集系统(二)
- Java参数验证Bean Validation 框架
- UWP 下载文件显示下载进度
- python webdriver api-右键另存下载文件
- MyBatis Generator自动创建代码
- redis 基本数据类型-列表(List)
- Qt4问题集锦
- jQuery之数组处理函数
- BestCoder Round #40 解题报告