怎么制作网页扇形分区图形

在平时工作中 , 除了在办公软件里面可以插入图形图表以外 , 我们还可以使用html5自带的绘图功能进行饼状图的制作 。 方法如下:工具/材料 html5
操作方法 01 在编辑环境(webstorm)里面新建一个名为hh的html文件

怎么制作网页扇形分区图形



02 在<body>标签里面新建一个类名为box2的类

怎么制作网页扇形分区图形



03 设置div标签的宽度为0

怎么制作网页扇形分区图形



04 为div设置高度(height)

怎么制作网页扇形分区图形



05 设置div边框的大小为100px,颜色为红色 , 实线 , 并在网页上下150px,左右居中的位置显示图形

怎么制作网页扇形分区图形



06 运行程序

怎么制作网页扇形分区图形



07 为div边框绘制一个圆角 , 使其变为一个填充色为红色的圆形

怎么制作网页扇形分区图形



08 再次运行程序

怎么制作网页扇形分区图形



09 设置图形右边的填充颜色

怎么制作网页扇形分区图形



10 输出图形

怎么制作网页扇形分区图形



11 设置图形底部的填充颜色

怎么制作网页扇形分区图形



12 再次输出图形

怎么制作网页扇形分区图形



13 【怎么制作网页扇形分区图形】设置图形左边的填充颜色

怎么制作网页扇形分区图形



14 输出最终想要的结果

怎么制作网页扇形分区图形





以上内容就是怎么制作网页扇形分区图形的内容啦 , 希望对你有所帮助哦!

    猜你喜欢