<!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. C语言中结构体的位域（bit-fields）

    转自:http://blog.sina.com.cn/s/blog_6240b5980100tcba.html 有些信息在存储时,并不需要占用一个完整的字节, 而只需占几个或一个二进制位.例如在存放一 ...

  2. 关于三星I9305出现android.process.acore提示问题

    背景:自己用百度云同步通讯录和用微信电话本删除联系人的时候总出现提示acore问题,为此上网找了许久. 网络上多说解决方案为:把Calendar.apk和CalendarProvider.apk两个文 ...

  3. 无法打开包括文件:“windows.h”: No such file or directory

      VS2012 出现如下错误: 无法打开包括文件:"windows.h": No such file or directory   解决办法,将 C:\Program Files ...

  4. OC对象的动态和静态构造区别

    Student.h: #import <Foundation/Foundation.h> @interface Student : NSObject @property(nonatomic ...

  5. java-xml格式化

    参考:http://www.oschina.net/code/snippet_17793_4733 package com.ddatsh;   import java.io.IOException; ...

  6. 解决全局变量共享---C语言的extern关键字用法

    在调试程序时,有一个参数需要在多个函数之间传递,因为是作为调试参数,不想将参数引入到函数中. 很自然的想到使用全局变量来表示这个公共参数,工程代码的结构如下: main.c test.c test.h ...

  7. javascript中时间的手动创建date的方式

    new Date("month dd,yyyy hh:mm:ss"); new Date("month dd,yyyy"); new Date(yyyy,mth ...

  8. 用js实现图片自动加载的瀑布流效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. Linux学习笔记（5）Linux常用命令之文件搜索命令

    (1)find find命令用于文件搜索,所在路径/bin/find,其语法格式为: find [搜索范围] [匹配条件] 1)-name:根据文件名搜索,如搜索/etc下的init文件 [root@ ...

  10. windows主机开启openssl的方法

    转自:http://www.feichang56.com/openssl/