1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style type="text/css">
  10.         div {
  11.             margin-bottom: 30px;
  12.             margin-left: 30px;
  13.         }
  14.  
  15.         /* 上半圆 */
  16.  
  17.         .semi-circle {
  18.             width: 100px;
  19.             height: 50px;
  20.             background-color: #cb18f8;
  21.             border-radius: 50px 50px 0 0;
  22.             /* 左上、右上、右下、左下 */
  23.         }
  24.  
  25.         /* 下半圆 */
  26.  
  27.         .semi-circle2 {
  28.             width: 100px;
  29.             height: 50px;
  30.             background-color: #cb18f8;
  31.             border-radius: 0 0 50px 50px;
  32.             /* 左上、右上、右下、左下 */
  33.         }
  34.  
  35.         /* 左半圆 */
  36.  
  37.         .semi-circle3 {
  38.             width: 50px;
  39.             height: 100px;
  40.             background-color: #cb18f8;
  41.             border-radius: 50px 0 0 50px;
  42.             /* 左上、右上、右下、左下 */
  43.         }
  44.  
  45.         /* 右半圆 */
  46.  
  47.         .semi-circle4 {
  48.             width: 50px;
  49.             height: 100px;
  50.             background-color: #cb18f8;
  51.             border-radius: 0 50px 50px 0;
  52.             /* 左上、右上、右下、左下 */
  53.         }
  54.  
  55.         /* 椭圆 */
  56.  
  57.         .semi-circle5 {
  58.             width: 100px;
  59.             height: 100px;
  60.             border-radius: 100px 0px 100px 0px;
  61.             background: green;
  62.             -webkit-transform: rotate(45deg);
  63.             -ms-transform: rotate(45deg);
  64.             -o-transform: rotate(45deg);
  65.             transform: rotate(45deg);
  66.         }
  67.  
  68.         .semi-circle6 {
  69.             border-radius: 100px 0 0;
  70.             width: 50px;
  71.             height: 50px;
  72.             background-color: aquamarine;
  73.         }
  74.     </style>
  75. </head>
  76.  
  77. <body>
  78.     <div class="semi-circle"></div>
  79.     <div class="semi-circle2"></div>
  80.     <div class="semi-circle3"></div>
  81.     <div class="semi-circle4"></div>
  82.     <div class="semi-circle5"></div>
  83.     <div class="semi-circle6"></div>
  84.     <p>扇形原理：左上角是圆角，其余三个角都是直角：左上角的值为宽和高一样的值，其他三个角的值不变（等于0）。</p>
  85. </body>
  86.  
  87. </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. liquibase使用

    1. 创建表 drop database if exists mybatis; create database mybatis; use mybatis; create table mybatis.C ...

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

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

  3. 【324】Python 库说明(安装&卸载)

    参考:Python_安装官方whl包和tar.gz包 参考:Unofficial Windows Binaries for Python Extension Packages 参考:PyPI 参考:直 ...

  4. Lamda所有的Capture均是引用

    [Lamda所有的Capture均是引用] 下面的程序,两个lambda 引用的实际上是同一个a.b.连int都能引用了,说明Lambda对所有类型都是以引用来处理. ; ; Func<int& ...

  5. python之time&datetime

    [time] secs:统一值,无local.UTC之分. struct_time:有local.UTC之分. time.time():返回secs,secs为统一值,无local&utc之分 ...

  6. windchill StatementCache: wt.util.Cache%828007782 [size=50, count=4, hits=36, misses=4, aged=0]

    StatementCache: wt.util.Cache%828007782 [size=50, count=4, hits=36, misses=4, aged=0] 方法: EXEC sys.s ...

  7. So you've been rejected, now what? On appeals in peer-reviewed publications(From Wiley Exchanges)

    Getting rejected stinks. Wouldn’t it be great if we could appeal people’s decisions in life? Imagine ...

  8. Python3 min() 函数

    Python3 min() 函数  Python3 数字 描述 min() 方法返回给定参数的最小值,参数可以为序列. 语法 以下是 min() 方法的语法: min( x, y, z, .... ) ...

  9. [leetcode]121. Best Time to Buy and Sell Stock 最佳炒股时机

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  10. Django路由控制总览

    今日内容:(路由层) 1 简单配置 -第一个参数是正则表达式(如果要精准匹配:'^publish/$') -第二个参数是视图函数(不要加括号) -url(r'^admin/', admin.site. ...