扇形制作原理，底部一个纯色原形，里面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. C++在使用Qt中SLOT宏须要注意的一个小细节

    大家都知道C++虚函数的机制,对于基类定义为虚函数的地方,子类假设覆写,在基类指针或者引用来指向子类的时候会实现动态绑定. 但假设指针去调用非虚函数,这个时候会调用C++的静态绑定,去推断当前的指针是 ...

  2. nginx 调优

    般来说nginx配置文件中对优化比较有作用的为以下几项:worker_processes 8;1 nginx进程数,建议按照cpu数目来指定,一般为它的倍数.worker_cpu_affinity 0 ...

  3. ABAP 常用系统变量

    SY-ABCDE 常量,A-Z字母表SY-BATCH 后台的程序运行SY-COLNO:当前选定列的列号SY-CPAGE 列表的当前显示页SY-CUCOL 屏幕,PAI 的水平光标位置SY-CUROW: ...

  4. PHP中$_POST,$_GET,$_REQUEST,$_FILES全局变量的全局指什么

    我一直担心,同一个表单,同时提交2次会发生什么事?在服务器端表单变量会不会彼此覆盖呢?也就是说假如我们在PHP中用$_REQUEST["name"]访问某个表单变量,会不会因为别人 ...

  5. 如何取消tableView的footer的粘滞效果

    footer默认的是固定在底部的  但有时我们需要和view一起滚动 主要是在scrollViewDidScroll这个代理方法中监听滚动的状况 设置如下 - (void)scrollViewDidS ...

  6. 到目前为止，Linux下最完整的Samba服务器配置攻略

    关 于Samba,大家有没有这种感觉,弄了N久丫的死活不喘气儿.找来各种“哥”和“姐”,发现全是“详解…配置专题”,看了半天不知道别个在说什么,好不 容易找了个简单的教程,从头到尾跟着做,尼玛,浪费时 ...

  7. Linux - 查看系统的版本信息

    在 Linux 中,有多种方法可以查看系统的版本信息. uname 命令 huey@huey-K42JE:~$ uname -a Linux huey-K42JE 3.5.0-43-generic # ...

  8. 在C#中创建类型

    重载构造函数: using System; public class Wine { public decimal Price; public int Year; public Wine (decima ...

  9. Android M Developer Preview - API Preview(一)

    API Overview The M Developer Preview gives you an advance look at the upcoming release for the Andro ...

  10. 项目开发中常用到的SQL语句

    阅读目录 循环示例 循环示例 循环示例 循环示例 1.循环示例 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知 ...