html - 如何裁剪div右上 Angular

This question already has answers here:

Cut Corners using CSS
（13个答案）
Box-shadow around “clipped” corner
（4个答案）
How to prevent single-sided border from wrapping around border radius?
（1个答案）
上个月关门了。
我想做如下图片：

请有人帮我实现这个目标

.div {
  height: 200px;
  background: blue;
  border-radius: 4px;
  border-top-right-radius: 40px;
}

<div class="div"></div>

注意：div背景应该是白色的

最佳答案

.cpath{
  background-color: #e6e6e6;
    padding: 20px 30px;
    clip-path: polygon(70% 0,100% 50%,100% 100%,0% 100%,0% 0%);
    width: 80px;
    height: 50px;
    border-left: 4px solid purple;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

}

<div class="cpath">
</div>