扇形制作原理，底部一个纯色原形，里面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++ 怎样获取系统时间

    c++ 怎样获取系统时间 2008-04-28 15:34 //方案— 长处:仅使用C标准库:缺点:仅仅能精确到秒级 #include <time.h> #include <stdi ...

  2. uboot官方FTP下载地址

    ftp://ftp.denx.de/pub/u-boot/

  3. Android应用在不同版本间兼容性处理

    在Android系统中向下兼容性比较差,但是一个应用APP经过处理还是可以在各个版本间运行的.向下兼容性不好,不同版本的系统其API版本也不同,自然有些接口也不同,新的平台不能使用旧的API,旧的平台 ...

  4. android116 轮播 viewPager实现

    布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...

  5. mvc_ajax_for form

    在上一篇介绍MVC中的Ajax实现方法的时候,曾经提到了除了使用Ajax HTML Helper方式来实现之外,Jquery也是实现Ajax的另外一种方案. 通过get方法实现AJax请求 View ...

  6. Migration from Zend Framework v2 to v3

    Migration from Zend Framework v2 to v3 Zend Framework v2 to v3 has been intended as an incremental u ...

  7. qt-vs-addin-版本支持

    qt-vs-addin-1.2.0-opensource.exe         VS200X qt-vs-addin-1.2.1-opensource.exe         VS200X qt-v ...

  8. IIS 之 启用日志记录

    如何为网站启用日志记录或 在 Microsoft Internet Information Services (IIS) 6.0 中,在 IIS 5.0 中,并在 IIS 4.0 中的FTP 站点.可 ...

  9. Objec类和final关键字的用法

    一.在继承中,子类继承父类,那父类继承谁呢,java中如果类没有指定继承谁,那么就默认继承Object类,object类是所有对象的直接或者间接的父类,根类,或者叫做基类,它里面定义的功能所有的对象都 ...

  10. [转]JSON序列化与反序列化

    本文转自:http://www.cnblogs.com/ejiyuan/archive/2010/04/09/1708084.html 方法一:引入System.Web.Script.Serializ ...