极客观点
项目管理
HarmonyOS
尝试着用border-raduis属性画扇形（虽然这并不是最好的方式）。用两个半圆进行重叠/覆盖，当要求角度小于180的时候，第二个半圆并不能完全覆盖第一个半圆。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 三角形 -->
<link rel="stylesheet" href="./triangle.css">
<!-- 梯形 -->
<link rel="stylesheet" href="./trapezoid.css">
<link rel="stylesheet" href="./sector.css">
<title>Document</title>
</head>
<body>
<div class="triangle"></div>
<br />
<div class="triangle2"></div>
<br />
<div class="trapezoid"></div>
<br />
<span>这是一个用border-left-top-radius实现的扇形</span>
<div class="sector"></div>
<div class="sector2"></div>
<div id="app">
<p>半圆</p>
<div class="semicircle"></div>
<p>大于180°的扇形</p>
<div class="sector3">
<div class="semicircle more-one"></div>
<div class="semicircle more-two"></div>
</div>
<p>小于180°的扇形</p>
<div class="sector3">
<div class="semicircle less-one"></div>
<div class="semicircle less-two"></div>
</div>
</div>
</body>
</html>.sector {
background-color: red;
width: 50px;
height: 50px;
border-radius: 100px 0 0;
border-top-left-radius: 100%;
/* border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%; */
}
.sector2 {
border-color: red;
}
.semicircle {
height: 100px;
width: 200px;
border-radius: 100px 100px 0 0;
background-color: rgb(91 130 255);
}
.sector3 {
position: relative;
}
.more-two {
position: absolute;
top: 0;
left: 0;
background-color: #7192fc;
transform-origin: 50% 100%;
transform: rotate(50deg);
}
.less-two {
position: absolute;
top: 0;
left: 0;
background: #f5f5f5;
transform-origin: 50% 100%;
transform: rotate(50deg);
}
html5
将外层
div绘制成圆形，然后设置overflow:hidden，通过裁剪的方式绘制出扇形