<!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. Visual Studio Code升级到0.5，提供对ES6的更好支持

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:题目即题记. 自从Visual Studio Code发布之后(最初是0.1),微软就 ...

  2. usb设备驱动描述,王明学learn

    usb设备驱动 本章主要内容包含以下:USB总线介绍,USB协议分析,USB系统架构 一.USB总线介绍 1.1USB发展史 USB(Universal Serial Bus)通用串行总线,是一种外部 ...

  3. linux系统定时任务

    crontab常用的几个命令如下 sudo crontab -l #显示所有的定时任务 sudo crontab -e #编辑任务 sudo crontab -r #删除所有的任务 编辑任务时的书写方 ...

  4. Cygwin的安装，卸载，以及安装gdb

    转载来源 http://10000001.blog.51cto.com/4600383/1341484   1.安装 其实Cygwin的安装时很简单的,需要的安装相应的就可以了,要详细的去网上找,很多 ...

  5. BZOJ 2152: 聪聪可可 树分治

    2152: 聪聪可可 Description 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)……遇到这种问题,一 ...

  6. hibernate常用配置

    核心配置 核心配置有两种方式进行配置 1:属性文件的配置:hibernate.properties 格式:key=value hibernate.connection.driver_class=com ...

  7. TOMCAT配置外部应用

    原来我们都是把项目放到webapps目录下,但其实是可以把项目放到其他文件夹下的,如果把项目放到其他目录下同时也希望tomcat可以运行它,有两种方法: 第一种方法:   conf/server.xm ...

  8. 【java】 获取计算机信息及Java信息

    获取计算机名称,操作系统信息,java信息 package com.agen.test1; import java.io.BufferedReader; import java.io.InputStr ...

  9. LoadRunner11录制APP脚本（2）

    通过安卓模拟器实现LoadRunner11录制APP脚本 http://www.51testing.com/html/24/15110424-3686857.html http://www.51tes ...

  10. Codeforces Round #356 (Div. 2)-B

    B. Bear and Finding Criminals 链接:http://codeforces.com/contest/680/problem/B There are n cities in B ...