How to set the color of pie slice without using clip-path?

Question

I've created a simple pie-chart (2 slices) and set the background color of the small slice by creating a layer with the help of CSS clip-path.

My problem is - clip path isn't working in Microsoft Edge.

Is there any better way to do it?

Codepen: https://codepen.io/anon/pen/QMPPOQ?editors=1100

body {
  background: #e74c3c;
  margin-top: 45px;
}
.chart {
    width: 400px;
    max-width: 90vw;
    height: 400px;
    margin: 0 auto;
    border-radius: 50%;
    border: 3px solid white;
    position: relative;
    background: rgba(255, 255, 255, .3);
    overflow: hidden;
}
.chart-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateY(-1.5px); 
}
.chart .line {
    width: 50%;
    height: 3px;
    background: white;
    position: absolute;
    top: 50%;
    transform-origin: 100%;
    transform: rotate(90deg);
}
.chart .line-spl {
    transform: rotate(60deg); /* 1/12 */
}
.layer {
  z-index: -10;
  position: relative;
  background: rgba(255, 255, 255, .6); 
  
  -webkit-clip-path: polygon(49% 55%, 25% 13%, 49% 8%);
  -ms-clip-path: polygon(40% 50%, 18% 12%, 40% 5%);
  -moz-clip-path: polygon(40% 50%, 18% 12%, 40% 5%);
  clip-path: polygon(49% 55%, 25% 13%, 49% 8%);

  height: 450px;
  width: 465px;
  left: -29px;
  top: -52px;
}

<div class="chart">
    <div class="chart-inner">
        <div class="line"></div>
        <div class="line line-spl"></div>
        <div class="layer"></div>   
    </div>
</div>