纯css画放射性效果

用纯css来实现放射性的背景，如下图

 //HTML
 <div class="box"></div>
 
 //CSS
 .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 500px;
    background-color: #ffb782;
    border-radius: 20px;
  }
 
 .box::before {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffa766;
    width: 100%;
    height: 100%;
    content: '';
    clip-path: polygon(
      20% 0%, 5% 0, 50% 50%,
      0 28%, 0 15%, 50% 50%,
      0 40%, 0 49%, 50% 50%,
      0 58%, 0 68%, 50% 50%,
      0 80%, 0 96%, 50% 50%,
      15% 100%, 0 190%, 50% 50%,
      42% 100%, 70% 178%, 50% 50%,
      70% 100%, 100% 120%, 50% 50%,
      100% 97%, 100% 84%, 50% 50%,
      100% 73%, 100% 62%, 50% 50%,
      100% 56%, 100% 48%, 50% 50%,
      100% 41%, 100% 32%, 50% 50%,
      100% 22%, 100% 7%, 50% 50%,
      85% 0, 66% 0, 50% 50%,
      50% 0, 33% 0, 50% 50%);
  }

效果如下：

注意：clip-path这个属性是有兼容性的，记得加上前缀（-ms-、-moz-、-webkit-、-o-），不过好像IE加了前缀也不行（难受），图中扇形的大小是可调整比例的。
虽然还原度不是100%，但是在可接受范围内！后期再有这种UI的话，就可以复用了！

最近在开发中遇到一个更简洁的方法， 更新一下，分享给大家！

 //HTML
 <div class="box"></div>
 
 //CSS
 .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 500px;
    background: #ffb782 repeating-conic-gradient(#ffa766 0 10deg, #ffb782 0 20deg);
    border-radius: 20px;
  }

利用background属性的repeating-conic-gradient这个值，也可以实现上面这个放射性的效果。