bugalu
12/12/2019 - 12:48 AM

3.7 楕円扇形

3.7 楕円扇形

3.7 楕円扇形

A Pen by Shin Ikeda on CodePen.

License.

<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;
}