<!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. [jOOQ中文]3. 数据库版本管理工具Flyway

    https://segmentfault.com/a/1190000010526452 在执行数据库迁移时,我们推荐使用jOOQ与Flyway - 数据库迁移轻松. 在本章中,我们将简单的来使用这两个 ...

  2. 想取得刚才nextval()的值时，放心大胆的用currval()吧，currval()的返回值并不会因为nextval()的并发访问而混乱

    以前写sql的时候总是担心current()得到的值并不会绝对等于我上一次nextval()取得的值;因为可能其他线程并发访问nextval(). 先说结论吧:当你拿到一个数据库连接,先nextval ...

  3. tr th td

    <table>     <caption></caption>     <thead>         <tr>             & ...

  4. CentOS Linux最常用命令及快捷键整理

    最近一直在对CentOS系统进行各种体验,为方便自己也方便他人,整理了Linux常用命令及快捷键,不过其实大多和DOS是一样的,只是命令的表达上可能有点儿不一样. 常用Linux命令: 文件和目录: ...

  5. 模m的剩余类里的一切数与m的最大公约数相等

    [模m的剩余类里的一切数与m的最大公约数相等] 设剩余类里的任意两元素,a.b.则: a=mq1+r1, b= mq2+r1. 根据上式可得,(a,m)=(m,r1), (b,m)=(m,r2).可推 ...

  6. Rotate image and fit show use canvas

    Description In the field of image processing, We always to show image after modified the image raw d ...

  7. Linux --centos7 开机启动设置

    以Linux下指定sun用户在linux开机时执行/home/sun/startrun.sh为例: 以root登录linux 执行vi /etc/rc.d/rc.local 在文档末尾添加一行语句:s ...

  8. 光源 材质 简析——基于《real time rendering》第三版 第五章

    对于真是世界的渲染,有三个重要的组成部分,光源,材质,以及摄像机.下面,我们一个一个来简单介绍一下. 光源:方向光,点光源,聚光灯.但是,在和物体表面交互的时候,光源对物体表面的影响是依赖光的辐照度( ...

  9. Wap版

    Wap版:又叫h5.M版.移动网页版: Mobile:存储wap版调用的接口

  10. MVC5数据库迁移命令！

    首先数据库迁移在上下文里设置要设置成为CreateDatabaseIfNotExists, 然后在Nuget控制平台输入命令 在“程序包管理器控制台”窗口中输入:Enable-Migrations   ...