<div class="item">
  <div class="fill"></div>
  <div class="fill2"></div>
</div>

.item{
  position: relative;
  top: 50px;
  left: 300px;
  width: 100px;
  height: 200px;
  background: #ffc;
  border-radius: 0px 0 0 0;
  // overflow:hidden;
  .fill{
    position: absolute;
    right: 0; top: 0;
    width: 200px;
    height: 100px;
    background: #159;
    border-radius: 200px 200px 0 0;
    transform: rotate(90deg);
    transform-origin: 50% 100%;
  }
  // 多出的角度
  .fill2{
    position: absolute;
    right: 0; top: 0;
    width: 200px;
    height: 100px;
    background: #759;
    border-radius: 200px 200px 0 0;
    // 多出的這塊角 55度  55+90 = 145
    transform: rotate(145deg);
    transform-origin: 50% 100%;
  }
}