如何使div右上角裁剪[重复]答案

【问题标题】：How to make div top right corner croped [duplicate]如何使div右上角裁剪[重复]
【发布时间】：2020-02-10 23:29:27
【问题描述】：

我想让DIV 如下图所示：

请有人帮助我实现这一目标

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

&lt;div class="div"&gt;&lt;/div&gt;

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

【问题讨论】：

它是如何复制的，没有盒子阴影到白色背景的 div
我添加了 2 个副本，白色是一种简单的颜色，如果您在副本中找到另一种颜色，您可以轻松更改它
@TemaniAfif 尝试改变颜色但没有效果
编辑您的问题以显示您的尝试并解释这不是重复的。
@TemaniAfif 在我的问题中，我的 div 有带框阴影的白色背景

标签： html css

【解决方案1】：

这是我能得到的最好结果

.parent {
  background: #ccc;
  height: 200px;
  position: relative;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-left:10px solid blue
}

.child {
  position: absolute;
  right: 0;
  background: #ccc;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #fff transparent transparent;
}

<div class="parent">
  <div class="child">
  </div>
</div>

【讨论】：

如何根据附加图像添加阴影？

【解决方案2】：

.tag-wrap {
  height: 200px;
  width: 500px;
  background: #f7f7f7;
  border-radius: 4px;
  border-top-right-radius: 0;
  border-left:10px solid blue;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  filter: drop-shadow(3px 3px 3px rgba(50, 50, 0, 0.3));
}
.tag {
  background: #fff;
  height: 200px;
  clip-path: polygon(0% 0%, 90% 0, 100% 30%, 100% 100%, 0% 100%);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="tag-wrap">
  <div class="tag">
  </div>
</div>
</body>
</html>

我为此使用了clip-path。您可以使用以下链接生成剪辑路径！

https://bennettfeely.com/clippy/

仅供参考 clip path 和 box-shadow 不能一起工作，所以你必须遵守一些规则。这是参考链接 https://css-tricks.com/using-box-shadows-and-clip-path-together/

【讨论】：

不客气 :)
右上角应该是直线，目前它有点圆..你能帮帮我
为小型设备调整剪辑路径
我们可以按照显示的图像添加阴影吗？
白底非灰色

【解决方案3】：

.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>

【讨论】：

【解决方案4】：

使用这个 CSS

.div {
      height: 200px;
      background: blue;
      border-radius: 4px;
      border-top-right-radius: 40px;
    }
    
        .div::before {
                content: '';
                position: absolute;
                top: 8px;
                right: 8px;
                border-top: 58px solid white;
                border-left: 40px solid #0012ff;
                width: 0;
            }

&lt;div class="div"&gt;&lt;/div&gt;

【讨论】：