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