从右上角看一个像圆圈一样的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答案，但使用框阴影绘制背景，因此可以看到身体背景。的 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;

}

Answer 2

你的问题很不清楚，但我可以根据它提出两种解释：

div {
 height: 300px;
 background: red;
 position: relative;
  border-top-right-radius: 80px;
}

<div></div>

或选项二：

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

div:before {
 content: '';
 position: absolute;
 top: 0; right: 0;
 width: 80px; height: 80px;
  background: white;
  border-bottom-left-radius:80px;
}

<div></div>