Semicircle with 3 segments together with text CSS

Question

I'm trying to build semicircle divided in three equal parts where I will put one sentence in each.

I have managed to build semicircle with 3 segments, but text is always in wrong way or outside the segment. I would really appreciate help to get beautiful semicircle with text properly positioned in each segment.

Here is my code http://jsfiddle.net/yg0bwdmf/

.circle {
  position: relative;
  padding: 0;
    margin: 1em auto;
  width: 20em;
    height: 20em;
  border-radius: 50%;
  list-style: none;
    overflow: hidden;
    transform: rotate(-70deg);
}
li {
  overflow: hidden;
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 50%;
  transform-origin: 0% 100%;      
}
.text {
position: absolute;
 left: -50%;
   top: 10%;
    right: 70%;
    width: 200%;
    height: 200%;
    text-align: center;
  -webkit-transform: skewY(60deg) rotate(15deg);
    -ms-transform: skewY(60deg) rotate(15deg);
    transform: skewY(25deg) rotate(10deg);
    padding-top: 70px;
}

li:first-child {
    -webkit-transform: rotate(0deg) skewY(-60deg);
    -ms-transform: rotate(0deg) skewY(-60deg);
  transform: rotate(60deg) skewY(162deg);     
}
li:nth-child(2) {
    -webkit-transform: rotate(30deg) skewY(-60deg);
    -ms-transform: rotate(30deg) skewY(-60deg);
  transform: rotate(120deg) skewY(162deg);     
}
li:nth-child(3) {
    -webkit-transform: rotate(60deg) skewY(-60deg);
    -ms-transform: rotate(60deg) skewY(-60deg);
  transform: rotate(180deg) skewY(162deg);    
}

li:first-child .text {
    background: green; 
}
li:nth-child(2) .text {
  background: tomato; 
}
li:nth-child(3) .text {
  background: aqua; 
}

<ul class="circle">
  <li><div class="text">here will be some text</div></li>
  <li><div class="text">another part of text</div></li>
  <li><div class="text">third part of text</div></li>
<ul>

Text is not positioned properly: