<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

        div {

            margin-bottom: 30px;

            margin-left: 30px;

        }

        /* 上半圆 */

        .semi-circle {

            width: 100px;

            height: 50px;

            background-color: #cb18f8;

            border-radius: 50px 50px 0 0;

            /* 左上、右上、右下、左下 */

        }

        /* 下半圆 */

        .semi-circle2 {

            width: 100px;

            height: 50px;

            background-color: #cb18f8;

            border-radius: 0 0 50px 50px;

            /* 左上、右上、右下、左下 */

        }

        /* 左半圆 */

        .semi-circle3 {

            width: 50px;

            height: 100px;

            background-color: #cb18f8;

            border-radius: 50px 0 0 50px;

            /* 左上、右上、右下、左下 */

        }

        /* 右半圆 */

        .semi-circle4 {

            width: 50px;

            height: 100px;

            background-color: #cb18f8;

            border-radius: 0 50px 50px 0;

            /* 左上、右上、右下、左下 */

        }

        /* 椭圆 */

        .semi-circle5 {

            width: 100px;

            height: 100px;

            border-radius: 100px 0px 100px 0px;

            background: green;

            -webkit-transform: rotate(45deg);

            -ms-transform: rotate(45deg);

            -o-transform: rotate(45deg);

            transform: rotate(45deg);

        }

        .semi-circle6 {

            border-radius: 100px 0 0;

            width: 50px;

            height: 50px;

            background-color: aquamarine;

        }

    </style>

</head>

<body>

    <div class="semi-circle"></div>

    <div class="semi-circle2"></div>

    <div class="semi-circle3"></div>

    <div class="semi-circle4"></div>

    <div class="semi-circle5"></div>

    <div class="semi-circle6"></div>

    <p>扇形原理：左上角是圆角，其余三个角都是直角：左上角的值为宽和高一样的值，其他三个角的值不变（等于0）。</p>

</body>

</html>

效果图：

css3半圆的更多相关文章

  1. css3实现半圆和圆效果

    在css2中,如果需要失效一些圆角或者半圆等等效果,一般是要通过ps等软件来处理的,在CSS3中,则不需要了,只需要通过border-radius就可以实现,大大方便了开发的效率. 无论圆角.圆弧.实 ...

  2. css3画半圆的两种方法

    <html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...

  3. css3画半圆 ， 加上一点动画

    border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如: .semicir ...

  4. css3画半圆

    border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如:.semicirc ...

  5. css3 画半圆和1/4圆

    半圆: #circle1 { width: 100px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px ...

  6. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  7. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  8. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  9. CSS3变形记(上)：千变万化的Div

    传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...

随机推荐

  1. ACCESS 组合字段 order by 出错

    ACCESS 组合字段 order by 出错 SELECT boardID,boardType,parentID,child,depth,rootID,(parentStr + ',' + boar ...

  2. libcurl 调用curl_easy_getinfo( ) 返回错误码对照

    //执行设置好的操作 res = curl_easy_perform(easy_handle); //获取HTTP错误码 ; curl_easy_getinfo(easy_handle, CURLIN ...

  3. Excel数据转化为sql脚本

    在实际项目开发中,有时会遇到客户让我们把大量Excel数据导入数据库的情况.这时我们就可以通过将Excel数据转化为sql脚本来批量导入数据库. 1 在数据前插入一列单元格,用来拼写sql语句. 具体 ...

  4. 如何在ArcMap中监听键盘鼠标事件(转)

    如何在ArcMap中监听键盘鼠标事件(转) Link: http://www.cnblogs.com/dyllove98/p/3155551.html 昨天有个朋友想要实现一个功能,就是在ArcMap ...

  5. Redis的强大之处

    [Redis的强大之处] 1.拥有对脚本的支持(此处是lua),脚本可选择性的缓存. 2.提供HyperLogLog计数器. 3.提供5种数据类型的全方位支持:List.Hash.Set.Ordere ...

  6. python之private variables

    ［python之private variables］ “Private” instance variables that cannot be accessed except from inside a ...

  7. Python help() 函数

    Python help() 函数  Python 内置函数 描述 help() 函数用于查看函数或模块用途的详细说明. 语法 help 语法: help([object]) 参数说明: object ...

  8. PEAR

    简介:pear是php扩展与应用库(the php extension and application repository)的缩写.它是一个php扩展及应用的一个代码仓库. 编码规范:参考(http ...

  9. ios7 导航栏适配

    ios ui开发过程中,经常会使用到导航栏,默认的样式比较单一,所以经常需要修改导航栏的样式 ios4: - (void)drawRect:(CGRect)rect { UIImage *image ...

  10. md5，原理待续

    以前项目中copy出来的 import java.security.MessageDigest; public class MD5Util { /** * @todo MD5加码 生成32位md5码 ...