<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .hold{position:absolute;width:200px;height:200px;}

    .outer{position:absolute;width:200px;height:200px;transform:rotate(225deg);clip:rect(0px,100px,200px,0px);border-radius:100px;background:yellow;}

    .pie{position:absolute;width:200px;height:200px;transform:rotate(180deg) !important;clip:rect(0px,100px,200px,0px);border-radius:100px;background:yellow;}

    .left{position:absolute;width:200px;height:200px;transform:rotate(135deg);clip:rect(auto,auto,auto,auto);border-radius:100px;}

    .leftadd{position:absolute;width:200px;height:200px;transform:rotate(180deg) !important;clip:rect(0px,100px,200px,0px);border-radius:100px;background:red;}

    .add{position:absolute;width:200px;height:200px;transform:rotate(225deg) !important;clip:rect(0px,100px,200px,0px);border-radius:100px;background:red;}
</style>

</head>

<body>

<div class="hold" style="margin:100px 0 0 200px;">

    <div class="outer"></div>

    <div class="pie"></div>

</div>

<div class="left" style="margin:320px 0 0 200px;">

    <div class="add"></div>

    <div class="leftadd"></div>

</div>

</body>

</html>

效果图：

纯css3绘制扇形的更多相关文章

  1. 用纯CSS3绘制萌系漫画人物动态头像

    大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测 ...

  2. 纯CSS3绘制神奇宝贝伊布动画特效

    在线演示       本地下载

  3. 纯CSS3绘制的黑色图标按钮组合

    在线演示 本地下载

  4. 纯CSS3实现3D特效的iPhone 6动画

    iPhone 6发布不久,屌丝怎能买得起,不过作为程序员,今天看到一个用纯CSS3绘制的iPhone 6,由于CSS3特性的运用,带有点3D的动画特效,大家可以先来看看在线演示效果. 在线演示    ...

  5. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  6. 超可爱 纯CSS3实现的小猪、小老鼠、小牛

    原文:超可爱 纯CSS3实现的小猪.小老鼠.小牛 利用纯CSS3绘制一些人物.动物.风景已经不是一件新鲜的事情了,主要是利用CSS3可以让直线变成任意的曲线,于是简单的矢量图形绘制对CSS3来说就小菜 ...

  7. 超酷！纯CSS3烧烤动画实现教程

    今天在老外的网站上看到一款很有创意的纯CSS3动画,是模拟烧烤活动的.款动画模拟了一个烧烤架,烧烤架上的食物也都是用纯CSS3绘制而成,没有用一张图片,效果相当逼真.另外一个有意思的是,这个CSS3烧 ...

  8. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  9. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

随机推荐

  1. [Mobile] 手机浏览器输入框-数字输入框

    手机浏览器的输入框,一直都是以web的方式进行开发的,没有关注到用户体验,领导提出了输入框要弹出数字输入框,想来应该有这种技术能实现.   搜索之后发现可以使用type="number&qu ...

  2. Java关键字native、volatile、transient

    native native是方法修饰符.Native方法是由另外一种语言(如c/c++,FORTRAN,汇编)实现的本地方法.一般用于JNI中. native关键字说明其修饰的方法是一个原生态方法,方 ...

  3. Codeforces Round #369 (Div. 2) C. Coloring Trees DP

    C. Coloring Trees   ZS the Coder and Chris the Baboon has arrived at Udayland! They walked in the pa ...

  4. pythonchallenge之C++学习篇-00

    前言 最近学习下C++,之前是python的用户,python解释器有诸多实现,其中最出名的要数C实现了,而且很多python的扩展模块可能要用C或者C++来写的,所以很有必要学习下C++了 为了避免 ...

  5. Arduino101学习笔记（八）—— 函数库

    /*********最小值*********/ min() //实现:#define min(a,b) ((a)<(b)?(a):(b)) /*********最大值*********/ max ...

  6. cocos2dx游戏开发——别踩白块学习笔记（一）——Block类

    一.Block类介绍 当然啦,Block类在这个游戏里就是必需品= =,因为整体都是由这个搞出来的,所以我们可以把游戏需要实现的功能都放在这里. 主要有下面这些功能(经典模式): 1.创建一个Bloc ...

  7. android之SharedPreferes

    Android应用开发SharedPreferences存储数据的使用方法 SharedPreferences是Android中最容易理解的数据存储技术,实际上SharedPreferences处理的 ...

  8. T-SQL 存储过程

    Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用.当存储过程执行一次后,可以将语句缓存中,这样下次执行的时候直接使用缓存中的语句.这样就可以提高存储过程的性能. Ø ...

  9. zookeeper源码分析二FASTLEADER选举算法

    如何在zookeeper集群中选举出一个leader,zookeeper使用了三种算法,具体使用哪种算法,在配置文件中是可以配置的,对应的配置项是"electionAlg",其中1 ...

  10. WINDOWS系统下四叶草CLOVER引导U盘制作

    一.所需软件1.下载BootDiskUtility链接:http://pan.baidu.com/s/1bwBFyu 密码:glyk 2.下载Clover r3330 USB链接:http://pan ...