制作一个像从右上角圆形裁剪的 div答案

【问题标题】：make a div like circly cropped from top right corner制作一个像从右上角圆形裁剪的 div
【发布时间】：2014-11-11 06:48:26
【问题描述】：

如何从右上角制作一个裁剪的 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;
}

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

【问题讨论】：

您需要的形状的图像会让它更容易理解。只是一个问题：您需要在纯背景上使用它吗？
你必须把border-top-right-radius: 50%;在 div 和 image 中
web-tiki 我需要透明背景

标签： html css crop css-shapes

【解决方案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;

}

【讨论】：

+1 因为 OP 需要透明背景，另一种选择边框而不是框阴影：codepen.io/web-tiki/pen/EGcyA
+1。 This 是它的另一个版本，使用 radial-gradient 但当然不支持 IE
@Harry ，是的，我更喜欢这个版本，当你提到 IE9 的行为时，不幸的是它仍然被搁置一旁:)

【解决方案2】：

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

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

&lt;div&gt;&lt;/div&gt;

或选项二：

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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：