<!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>
效果图：
