扇形制作原理，底部一个纯色原形，里面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>

html5 css3 如何绘制扇形任意角度的更多相关文章

  1. 大厂前端工程师教你如何使用css3绘制任意角度扇形+动画

    这里只是做下原理解释,原理:使用两个半圆做角度拼接.比如想绘制一个缺口朝右,缺口弧度30度角的扇形 资源网站搜索大全https://55wd.com 那么将由一个旋转65度角的半圆A+一个旋转-65度 ...

  2. 【项目1-1】使用HTML5+CSS3绘制HTML5的logo

    作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...

  3. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  4. 20 个超酷的 HTML5/CSS3 应用及源码

    [导读] 1.HTML5视频破碎重组特效,强大视觉冲击HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给人强大的视觉冲击.点击视频任意地方,HTM ...

  5. HTML5+CSS3整体回顾

    http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H5的一些 ...

  6. 《零基础学HTML5+CSS3(全彩版)》读书笔记

    2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...

  7. html5--5-9 绘制扇形

    html5--5-9 绘制扇形 学习要点 综合运用已经学过的知识绘制一个扇形 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无 ...

  8. 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  9. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

随机推荐

  1. android开发学习：打电话和发短信

    1.新建一个android项目 File--New--Other--android application project 填写application name(就是应用的名字.比方:天天酷跑) 填写 ...

  2. 在artTemplate的标签中使用外部函数的方法

    第一步,声明函数,并将函数作为data对象的属性.例如: var resArray = new Array(); function beforeRender(data) { //addToArray为 ...

  3. UITableView实现格瓦拉飞天投票模块

    格瓦拉目前来说动画效果确实做的还比较好,虽然不是说很炫但做到精致,这次就模仿了它投票的模块.其实想到要实现它还是有很多方法,不过这次我还是采用了苹果自带控件UITableView简简单单来实现它,再次 ...

  4. Unity手游之路&lt;七&gt;角色控制器

    我们要控制角色的移动,能够所有细节都由自己来实现.控制角色模型的移动,同一时候移动摄影机,改变视角.当然Unity也提供了一些组件,能够让我们做更少的工作,实现我们所期望的功能.今天我们就一起系统来学 ...

  5. [MethodImpl(MethodImplOptions.Synchronized)]

    在NopCommerce项目的Nop.Core类库中有一个EngineContext类中有一个Initialize方法用到了[MethodImpl(MethodImplOptions.Synchron ...

  6. Java基础知识强化之网络编程笔记10：TCP之客户端读取文本文件服务器控制台输出

    1. TCP之客户端读取文本文件服务器控制台输出 (1)客户端:(发送数据到服务端) package cn.itcast_10; import java.io.BufferedReader; impo ...

  7. h5拖放-上传图片预览功能

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 命令行界面下的用户和组管理之usermod的使用

    当使用useradd添加好用户之后,想要做一些修改,这时需要用到usermod命令. 功能说明:修改用户帐号的各项信息. 语 法:usermod [-L | U][-c <备注>][-d ...

  9. Linux 的使用基础---Linux的常用命令

    自己电脑的安装的软件太多了,如果重装linux系统的话,是在是太麻烦了,本身电脑系统是32位的,硬件上的配置也行,所以就安装了虚拟机,在虚拟机上又安装了一个Linuxd 系统,虽然速度是有些慢,总比浪 ...

  10. windows共享文件夹如何让CentOS 6.5读取

    http://www.111cn.net/sys/CentOS/74104.htm 工作需要,需要把本地win7共享的文件夹让CenotOS 6.5服务器临时使用一下,以下是CentOS 6.5系统挂 ...