SOURCE

<div style="width:600px;height:1000px;background:transparent;">
<div class="one"></div>

<div class="two"></div>

<div class="three"></div>

<div class="fore"></div>

<div class="five"></div>

<div class="six"></div>

<div class="seven"></div>
  
<div class="eight"></div>
  
  </div>

div{
  width:100px;
  height:100px;
  background:#228B22;
  float:left;
  margin-left:30px;
}
.one{
  width:0;
  height:0;
  background:transparent;
  border:transparent solid 50px;
  border-top:50px solid #228B22;
}

.two{
  width:0;
  height:0;
  background:transparent;
  border:transparent solid 50px;
  border-left:50px solid #228B22;
}

.three
{
  width:50px;
  border-radius:0 100% 100% 0/0 50% 50% 0;
}

.fore{
    height:50px;
    border-radius:50% 50% 0 0/100% 100% 0 0;
}

.five{
  width:50px;
  height:200px;
   border-radius:0 100% 100% 0/0 50% 50% 0;
}
 
.six{
  height:50px;
  width:200px;
  border-radius:50% 50% 0 0/100% 100% 0 0;
}
.seven{
  background:transparent;
 
}
.seven::before{
  transform:skew(-45deg);
  content:'';
  display:block;
  width:100px;
  height:50px;
  background:#228B22;
  /*  margin-left:30px; *///做展示排版用，实际使用时删去；
}

.eight{
    background:transparent;
    perspective:80px;
}
.eight::before{
  content:'';
  display:inline-block;
  background:#228B22;
  width:100px;
  height:100px;
  transform:rotateX(70deg);
  transform-origin:bottom;
}