<!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. InnoDB: The log sequence number in ibdata files does not match

    InnoDB: The log sequence number in ibdata files does not matchInnoDB的:在ibdata文件的日志序列号不匹配 可能ibdata文件损 ...

  2. 一劳永逸解决VLC播放中文字幕乱码问题

    VLC对于Mac/Ubuntu用户来说算得上是必备软件.其相当于PC机上的“暴风影音”,但Mac/Ubuntu的新手使用VLC播放avi时都会碰 到字幕乱码的问题.avi字幕的格式有多种,这里假设你使 ...

  3. zookeeper分布式锁和服务优化配置

    转自:https://www.jianshu.com/p/02eeaee4357f?utm_campaign=maleskine&utm_content=note&utm_medium ...

  4. 学习IIS & MVC的运行原理 (转)

    我一直疑惑于以下问题,从客户端发出一个请求,请求到达服务器端是怎样跟iis衔接起来的,而iis又是怎样读取我发布的代码的,并返回服务器上的文件.这其中是怎样的一个处理过程. 1:当你从浏览器中输入一个 ...

  5. 归纳整理Linux下C语言常用的库函数----内存及字符串控制及操作

    在没有IDE的时候,记住一些常用的库函数的函数名.参数.基本用法及注意事项是很有必要的. 参照Linux_C_HS.chm的目录,我大致将常用的函数分为一下几类: 1. 内存及字符串控制及操作 2. ...

  6. Excel VBA入门（九）操作工作薄

    虽然我前面讲过,在VBA中操作工作薄并不是件明智的事,但有些时候,还是避免不了要这么做.绝大多数情况下,我们要做的是获取到某个工作薄对象,并以此来获得其中的工作表对象,然后再对工作表中的数据进行处理. ...

  7. leetcode 21 Merge Two Sorted Lists 合并两个有序链表

    描述: 合并两个有序链表. 解决: ListNode* mergeTwoLists(ListNode* l1, ListNode* l2) { if (!l1) return l2; if (!l2) ...

  8. 在Ubuntu18.04的Docker中安装Oracle镜像及简单使用

    一.软件环境: 1.OS:Ubuntu 18.04 2.已安装了Docker 二.安装Oracle镜像的过程 1.切换到root账号下,如果是普通账号,下面操作指令前面加sudo 2.搜索oracle ...

  9. [Jenkins]怎样自定义发出邮件的 From Email Address 和 From Name

    在Jenkins上建了一个执行SoapUI的task,想要自定义发送邮件的地址和姓名,怎么办呢? 在Editable Email Notification里面添加Pre-send Script 脚本如 ...

  10. Android内核的编译与测试

    1.下载Android内核 source.android.com/source->Downloading and Building Building Kernels 大概要花2个小时,其源码在培 ...