如何在不使用剪辑路径的情况下设置饼图切片的颜色？

Question

我创建了一个简单的饼图（2个切片），并通过CSS剪辑路径创建图层来设置小切片的背景颜色。

我的问题是 - 剪辑路径不能在Microsoft Edge中运行。

有没有更好的方法呢？

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;