<!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. phpMailer邮件发送

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 最长公共子序列（LCS）和最长递增子序列（LIS）的求解

    一.最长公共子序列 经典的动态规划问题,大概的陈述如下: 给定两个序列a1,a2,a3,a4,a5,a6......和b1,b2,b3,b4,b5,b6.......,要求这样的序列使得c同时是这两个 ...

  3. 什么是好的API设计？（转）

    什么是API? 我们只要是在进行编程我们就需要不停的设计API. API简单来讲可以是一个调用的函数,一个接口. 抽象来说,接口是一个内聚系统暴漏给外部的一切信息,包含但不限于: 调用方式:比如通过l ...

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

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

  5. Arduino101学习笔记（七）—— 时间API

    1.毫秒时间 获取机器运行的时间长度, 单位毫秒. 系统最长的记录时间为9小时22分, 如果超出时间将从0开始. 警告: 时间为 unsigned long类型, 如果用 int 保存时间将得到错误结 ...

  6. Android studio导入eclipse项目且不改变目录结构

    Android studio的安装与配置论坛当中已经有很多在此就不在细说了,现在开始说下如何在Android studio当中导入eclipse的项目且不改变其目录结构和配置,让使用eclipse的同 ...

  7. 【hibernate】 hibernate的主键策略

    今天使用maven生成一个sping+springMVC+hibernate 的项目,报错如下: 错误提示呢:不能解释这个id的生成策略[uuid.string].就是uuid.string这个hib ...

  8. Loadrunner在场景中添加多个负载机报错：Action.c(38): Error -26488: Could not obtain information about submitted解决方法

    Error -26488: Could not obtain information about submitted file "E:\.jpg": _stat32 rc=-1, ...

  9. Sprint回顾_团队听诊器

  10. POJ3084 Panic Room（最小割）

    把某点与某几点分开的最小花费,当然想到最小割.具体怎么建图,可以画个简单的情况,然后就清楚了: 0到1不受控制,建立0->1容量为INF的边: 1到0受在0一边的一个控制面板的控制,建立1-&g ...