扇形制作原理，底部一个纯色原形，里面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. [React Fundamentals] Component Lifecycle - Updating

    The React component lifecycle will allow you to update your components at runtime. This lesson will ...

  2. [MODx] Build a CMP (Custom manager page) using MIGX in MODX 2.3 -- 1

    BIG FUCK for MODx MODx document is not that good  ...  at least in my opint of view. I spend hours t ...

  3. 已超过了锁请求超时时段。 (Microsoft SQL Server,错误: 1222)

    操作SQLServer数据库时.遇到这种问题:已超过了锁请求超时时段. (Microsoft SQL Server,错误: 1222) 经过查找材料了解为资源抢占,照成死锁,杀死进程就OK了.详细操作 ...

  4. ajax表单提交插件jquery.form.js的运用

    该插件提交的数据包含上传的图片. 1.先导入jquery.form.js 2.form表单的元素: <form id="form2_form" method="po ...

  5. iOS7 设置隐藏状态栏（status bar）

    在info.plist 添加 UIViewControllerBasedStatusBarAppearance(View controller-based status bar appearance) ...

  6. JAVA_JSON

    package cn.kjxy.JSON; import org.json.JSONArray; import org.json.JSONException; import org.json.JSON ...

  7. smartctl工具应用（转载整理）

    转载:https://linux.cn/article-4682-1.html Smartctl(S.M.A.R.T 自监控,分析和报告技术)是类Unix系统下实施SMART任务命令行套件或工具,它用 ...

  8. css动画——transition和animation

    http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...

  9. HTTP层 —— 响应

    1.创建响应 字符串&数组 所有路由和控制器都会返回一个被发送到用户浏览器的响应,Laravel 提供了多种不同的方式来返回响应,最基本的响应就是从路由或控制器返回一个简单的字符串,框架会将这 ...

  10. 关于c#生成word。

    需求:需要把数据做成这样的效果.一个页面展示一个r单子数据. object filename = ""; Object Nothing = System.Reflection.Mi ...