如何使用剪切路径创建弯曲的三角形

Question

我正在尝试使用剪辑路径重新创建this效果。我已经使用:before得到了这个结果，但是如何创建圆角呢？

div {
  width: 100%;
  height: 200px;
  background: #0076bf;
  margin-top: 200px;
  position: relative;
}
div:before {
  content: '';
    width: 100px;
    height: 100px;
    background-color: #0076bf;
    position: absolute;
    display: block;
    right: 0;
    top: -100px;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

<div>
content
</div>