html - 从右上角制作一个类似圆形裁剪的div

Question

如何从右上角裁剪 div。假设我有一个方形图像，我将右上角切成圆形。我的问题是如何使用纯 css 制作方形图像的剩余形状？？？请帮助我!!

我的代码:

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid red;
    width: 0;
}

这段代码像折叠页面一样折叠右上角。但我需要在右上角切圆。

Answer 1

与@web-tiki 的答案非常相似，但是使用了 box-shadow 来绘制背景，因此可以看到主体背景。 <强> DEMO

div {
  height: 150px;
  width:150px;
  overflow:hidden;
  position: relative;
}div:before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  height: 80px ;
  width: 80px;
  border-radius:100%;
  box-shadow:red 0 0 0 500px;

}