css3半圆
2024-09-21 06:34:52
<!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>
效果图：
最新文章
- Spring MVC注解的一些案列
- 查询expression的小工具
- 替换CENTOS自带的yum源为网易163镜像源
- Git更新到最新版本
- Installshield 打包安装包心得
- robotframework笔记25
- Oracle- 表的管理
- ListToDataTable
- 扩展SpringMVC以支持绑定JSON格式的请求参数
- Speex Acoustic Echo Cancellation (AEC) 回声消除模块的使用
- RPA（Robotic Process Automation）的概要介绍
- Android6.0 源码修改之 Contacts应用
- openGL学习----相机
- mechanize (1)
- 在Ubuntu上搭建IntelliJ IDEA license server服务器
- 如何为Windows Forms应用程序添加启动参数(Start-Up Parameters)
- C#输出到Release VS中Release模式下生成去掉生成pdb文件
- 模板 快速询问GCD
- Codeforces Round #353 (Div. 2) A. Infinite Sequence 水题
- UESTC--1655