<!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. sql server2008本地连接选择windows身份验证无法登陆的解决办法

    1.安装完sqlserver数据库,本地连接登录不了 解决办法:进入cmd,输入net start mssqlserver 服务启动后,再次用windows身份验证就可以登陆本地数据库了

  2. 7.25 9figting！

    TEXT 87 Fund management基金管理   A Miller's tale 米勒传奇(陈继龙编译) Dec 7th 2006 From The Economist print edit ...

  3. 【328】Python 控制鼠标/键盘+图片识别 综合应用

    本文是基于 [267]实现跨网络传数据 的基础上的,由于在弹出 putty 之后,需要手动输入命令(pass.sh.get.sh)来实现数据的传递,另外就是处理完之后需要手动关闭 putty,本文解决 ...

  4. lombok 注解使用

    需要引入: <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok&l ...

  5. LevelDB Version

    [LevelDB Version] Version 保存了当前磁盘以及内存中所有的文件信息,一般只有一个Version叫做"current" version(当前版本).Level ...

  6. SO_LINGER

    [SO_LINGER] 在默认情况下,当调用close关闭socket的使用,close会立即返回,但是,如果send buffer中还有数据,系统会试着先把send buffer中的数据发送出去,然 ...

  7. 使用heroku创建应用时报错 heroku does not appear to be a git repository

    在跟着heroku的官方教程创建python应用时,到deploy-the-app这一步,要上传代码到heroku 的git仓库时,报的这个错误: 网上一搜,相关的答案居然极少,首页只出现一篇(还好这 ...

  8. 10-SSH综合案例：前台用户模块：邮箱服务器配置

    之前发邮件是自己发到服务器还是?是自己搭建一个还是注册一个163啊?自己可以搭建一个邮箱的服务器然后去发送邮件.就是你必须得在这上面有了账户才能发,你也可以往网络上发.你的主机就是一台邮箱服务器了.你 ...

  9. jquery获得/修改html标签

    1.添加 meta$("head").append('<meta http-equiv="content-type" content="text ...

  10. memcache can't run as root without the -u switch

    memcached是一款高速.分布式的内存缓存系统.其官方主页在http://www.danga.com/memcached/1.安装前的准备要安装memcached,需要有libevent的支持.c ...