教你用css3实现图片容器内等比缩放,教你用c3实现图片容器内等比缩放......
2023-03-16 303 CSS
如何使用纯CSS制作扇形图，合并起来形成饼图
来源：互联网
2023-03-16 19:17:29 119
纯粹使用CSS制作饼图。由于js和flash制作成的图形，在某些导出PDF方式下，不能正常的导出，所以采用了纯CSS的方式。
工具/原料
- CSS3知识
- html知识
- 文本编辑器
方法/步骤
创建一个空白的html文件
添加Div，DIV设定在页面中的位置。本示例展示一个从0度顺时针转超过180度的，一个从0度逆时针转超过180度的。由于未超过180度的，可以单纯转就可以实现，暂不介绍。
给顺时针添加样式，如下图。实现原理：使用clip属性截图最大可以截取180度的半圆形，超过180度就需要用补全的方式了。
给逆时针添加样式，如下图。实现原理：跟顺时针相同，稍复杂一步。需要先转出360去掉逆时针的角度。比如：225度，需要先转360-225=135度，结合起来才能实现。
全部实现后，如下图。（上下由于工具自动截取，原图是补全的）
全部的DIV要使用绝对定位position:absolute,图片的大小和截取的半径要相同。
注意事项
- clip: rect(0px,100px,200px,0px); 依次为：上、右、下、左
- transform:rotate(180deg); 旋转多少度
- !important; 提升本条代码的优先级
- border-radius: 100px; 截图的半径，一般为正方形的一半
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： CSS
上一篇：jquery如何获取点击区域内的文本 下一篇：css如何设置div的最小宽度
相关文章
- 详细阅读
-
怎么用div布局加css样式做网页详细阅读
怎么用div布局加css样式做网页,怎么做一个网页呢，静态页面的制作是很简单的，我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 453 CSS
-
css基础教程：[1]为网页使用网络字体详细阅读
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f34c65fc66ef4fcf5ef0d411f.jpg)
css基础教程：[1]为网页使用网络字体,本教程为大家介绍在网页上怎么使用网络字体。1，使用网络字体的好处是所有人看到的效果都是样的，效果统一，2，不依赖于用户电脑上是否安装了该字体。......
2023-03-16 299 CSS