<!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. YII 自带验证码实现

    共三步,分别controllers,models,views各一层添置一行代码即可实现 第一步在controllers添加 public function actions() { return arr ...

  2. js Excel导出

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...

  3. linux rz sz 的安装

    先wget获取包wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz然后解压tar zxvf  rzsz-3.48.tar.gz进入目录c ...

  4. readonly const

    readonly:只读域,只能在初始化--声明初始化或构造器初始化--的过程中赋值,其他地方不能进行对只读域的赋值操作,否则编译器会报错.只读域可以是实例域也可以是静态域.只读域的类型可以是C#语言的 ...

  5. Python any() 函数

    Python any() 函数  Python 内置函数 描述 any() 函数用于判断给定的可迭代参数 iterable 是否全部为 False,则返回 False,如果有一个为 True,则返回 ...

  6. jQuery插件Highcharts

    Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用. ...

  7. react native 导航路由组件react-navigation的使用

    navigation的几个难点和问题: 1.底部tab是否可以加上中间的大按钮? 如果加上,如何触发事件? js文件放哪? 2.navigation的登录注册页面.成功后应该不能返回刚刚的登录页面?清 ...

  8. Basic4android v3.00 发布

    这次发布的版本主要是增加了快速debuger. 在运行时,可以在IDE 里面随时修改代码,而不需要重新发布应用. 大大提高了开发效率. Basic4android v3.00 is released. ...

  9. Jdom简单的修改xml文件实现

    上一篇博客写到在打开outputStream 时总是报错,而且出现jdom有问题,后来注意到junit提示的一个错误:文件过早关闭. 顾名思义:用getResorceAsStream打开了文件作为输入 ...

  10. webapi Model Validation 模型验证

    通常情况下,对于那些经常为别人提供数据接口的开发人员来说,对于调用方传递过来的参数都会有验证处理.例如: if (string.IsNullOrEmpty(entity.Name)) { //当姓名为 ...