<!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. hdu 4063 福州赛区网络赛 圆 ****

    画几个图后,知道路径点集一定是起点终点加上圆与圆之间的交点,枚举每两个点之间是否能走,能走则连上线,然后求一遍最短路即可 #include<cstdio> #include<cstd ...

  2. 注解：【有连接表的】Hibernate单向N->N关联

    Person与Address关联:单向N->N,[有连接表的] #和单向1->N关联代码完全相同,控制关系的一端需要增加一个set类型的属性,被关联的持久化实例以集合形式存在. #N-&g ...

  3. 我的 Unity2D 屏幕适配

    以下方法纯属我YY,切勿当真!!! 确定一个设计尺寸,比如 devWidth = 960,devHeight = 640, 按照这个尺寸进行设计游戏. 方式一: 不管什么屏幕尺寸,都和设计的尺寸对应. ...

  4. linux服务器init 5启动图形界面，报错Retrigger failed udev events

    今天因工作需要开启linux系统的桌面环境,使用startx未成功,报如下错误: [root@ /]# startx xauth: creating new authority xinit: No s ...

  5. [HTTP那些事]网络请求API

    在Android上,原生API有两个,HttpUrlConnection和HttpClient,它们对封装Socket进行封装,让HTTP请求变得简单.这应该也算框架吧? 想象下,如果没有HttpUr ...

  6. String equals（）方法使用以及子串加密

    String equals()方法的实现方法: 名称 说明 String.Equals (Object) 确定此 String 实例是否与指定的对象(也必须是 String)具有相同的值. Strin ...

  7. Docker中自动化搭建Hadoop2.6完全分布式集群

    这一节将在<Dockerfile完成Hadoop2.6的伪分布式搭建>的基础上搭建一个完全分布式的Hadoop集群. 1. 搭建集群中需要用到的文件 [root@centos-docker ...

  8. js公有、私有、静态属性和方法的区别

          现下,javascript大行其道,对于网站开发人员来说,javascript是必需掌据的一门语言,但随着jquery等框架的流行和使用,许多人对于原生javascript缺乏深入的理解, ...

  9. Shell 编程基础之注意技巧

    退出状态bash中的内建命令虽然不创建新的进程,但也会有Exit Status,通常也用0表示成功非零表示失败,可以用特殊变量$?读出 命令代换:`或$() user@ae01:~$ echo `da ...

  10. Hadoop维护IPC链接

    IPC链接上长时间没有发生远程调用,客户端会发送一个心跳消息给服务器端,用于维护链接. Connection的lastActivity用来记录上次发生IPC通信的时间. Connection.touc ...