3.7 楕円扇形
<div class="container">
<div class="obj ellipse1"></div>
<div class="obj ellipse2"></div>
<div class="obj rect-long"></div>
<div class="obj rect-short"></div>
</div>
*{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
.container{
position:relative;
height: 100vh;
transform-origin:left top ;
transform: scale(1.0);
/* 背景画像の調整 */
background-image: url(https://0css.github.io/svg/scythe.svg);
background-size: 500px auto;
background-position: 50px 10px;
background-repeat: no-repeat;
}
.obj {
position: absolute;
}
.ellipse1 {
opacity: 0.5;
top:93px;
left:363px;
width: 170px;
height: 246px;
background-color: slategray;
border-radius: 0 0 100% 0;
}
.ellipse2 {
top:93px;
left:302px;
width: 178.5px;
height: 260.5px;
background-color: #fff;
border-radius: 0 0 100% 0;
}
.rect-long{
top:109px;
left:57px;
width: 410px;
height: 6px;
background-color: saddlebrown;
}
.rect-short{
top:104px;
left:467px;
width: 76px;
height: 16px;
background-color: dimgray;
}