扇形制作原理，底部一个纯色原形，里面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. JS知识点备忘

    做前端久了,会发现很多比较杂的知识点,平时很少用到(往往在面试的时候经常见到),但是遇到的时候会很揪心...所以遇到的时候把它记录下来,但求有个印象,再次遇到时,可以在这里快速找到解决. 1.文档碎片 ...

  2. Android开发环境中的概念和工具介绍

    最近学习Android开发,以前使用C/C++多一些,现在再补点Java知识,不管是哪种语言,都不过是一种工具而已,真的学起来,大同小异,无谓优劣.学习Android编程肯定是要先从环境搭建开始,无论 ...

  3. [Node.js] Creating Demo APIs with json-server

    json-server makes it extremely easy to setup robust JSON apis to use for demos and proof of concepts ...

  4. Struts2 中的数据传输

    1.     如何将参数从界面传递到Action? 你可以把Struts2中的Action看做是Struts1的Action+ActionForm,即只需在Action中定义相关的属性(要有gette ...

  5. GNU bash实现机制与源代码简析

    http://www.cnblogs.com/napoleon_liu/archive/2011/04/01/2001886.html http://blog.csdn.net/ruglcc/arti ...

  6. jQuery选择器模糊匹配

    <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&quo ...

  7. C语言创建并使用dll

    利用C语言创建 利用 C++使用: 参见前面  利用C语言创建并使用lib 如法炮制创建 showDll Dll代码 __declspec(dllexport) double myDivision(i ...

  8. 会话状态Session解析以及原理分析

    我们知道web网站在客户端存储数据有三种形式:1. Cookie   2. hidden(隐藏域) 3.QueryString 其中viewstate什么的都是通过第二种方式隐藏域存储滴. 客户端存储 ...

  9. Javascript中new

    // 加不加new结果都一样 var obj = new Function('var temp = 100;this.temp = 200;return temp + this.temp;'); al ...

  10. 在安卓下使用python连接蓝牙串口模块(HC-06)

    在安卓上安装Python: 请参考:https://github.com/kuri65536/python-for-android/blob/master/README.md下载程序文件需要访问 ht ...