css3半圆
<!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半圆的更多相关文章
- css3实现半圆和圆效果
在css2中,如果需要失效一些圆角或者半圆等等效果,一般是要通过ps等软件来处理的,在CSS3中,则不需要了,只需要通过border-radius就可以实现,大大方便了开发的效率. 无论圆角.圆弧.实 ...
- css3画半圆的两种方法
<html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...
- css3画半圆 ， 加上一点动画
border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如: .semicir ...
- css3画半圆
border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如:.semicirc ...
- css3 画半圆和1/4圆
半圆: #circle1 { width: 100px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px ...
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- css3圆形百分比进度条的实现原理
原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...
- 图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...
- CSS3变形记(上)：千变万化的Div
传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...
随机推荐
- eclipse中debug改变变量的值
step1:debug断点到变量的下一行,在debug试图的右上角variables中看到该变量的值: step2:鼠标右键点击str出现下图,选择Change Value... step3:点击Ch ...
- 创建maven版的java工程
步骤如下: 1.第一步 2.第二步: 3.第三步:
- Unity加载二进制数据
[Unity加载二进制数据] The first step is to save your binary data file with the ".bytes" extension ...
- Python Modules
[Python Modules] 1. a module is a python source file. 2. a package is a directory with a __init__.py ...
- SAP middb主键加索引
alter table DEPTBIGCPDL_DBC drop constraint DEPTBIGCPDL_DBC_PK CREATE UNIQUE INDEX TABLEAU_USER.DEPT ...
- bootstraptable为行中的按钮添加事件
- juniper交换机配置
1.链接串口配置: minicom -s ```bash Serial port setup A - Serial Device : /dev/ttyS1 ...
- 多因子降维法(MDR，Multifactor Dimensionality Reduction ）
多因子降维法(MDR,multifactor dimensionality reduction) 多因子降维法(MDR,Multifactor Dimensionality Reduction ) ...
- UX术语详解：任务流，用户流，流程图以及其它全新术语
以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 用户体验拥有一长串专业的术语和可交付内容.当在线查看UX相关职位描述时,所罗列的这类术语更是 ...
- struts2下velocity做视图如何访问request,session等内置对象，如：原来webwork的$req
struts2下velocity做视图如何访问request,session等内置对象(转) velocity 内置对象 struts2 requestStruts2环境下用velocity做视图时访 ...