Html 带有渐变背景的带边框div的半圆透明裁剪

我想用CSS完成以下图形样式：

我已经成功地复制了预期设计的每一个方面，除了半圆切口

我能得到的最接近的方法是通过设置与背景匹配的剪切圆的背景色，以及相应侧的插入阴影和边框来遮罩节点体的部分

在那之后，我添加了一个向相反方向的扩展，这样节点投射的任何阴影也可以有效地遮罩。结果如下：

身体{ 字体系列：SegoeUI； 背景色：EAEA； } /*-断流器-*/ .左侧节点断开{ 位置：绝对位置； 背景色：EAEA； 左：-1px； 宽度：18px； 高度：36px； 边框右上角半径：50px； 边框右下半径：50px； 边框：1px实心RGBA1221672000.7； 左边界：无； 盒影：-1px 1px 1px rgba0,0,0.05插图； } .node cutout left:：after{ 内容：； 显示：块； 位置：绝对位置； 左-18px； 顶部：0px； 高度：36px； 宽度：18px； 背景色：EAEA； } /*-断流端-*/ .节点{ 光标：移动； 位置：绝对位置； 顶部：12px； 左：20px； 宽度：160px； 盒影：1px1p5pRGBA0,0,0,0.25； 边框：1px实心RGBA1221672000.7； } .节点头{ 最小高度：20px； 填充：6px 12px； 背景色：489ddb； 颜色：fff； 字号：12号； 字号：100； 框阴影：0px 0px 0px 1px 489ddb；/*覆盖节点边框*/ } .节点体{ 位置：相对位置； 最小高度：100px； 填充：12px 24px； 背景：ffffff； 背景：线性梯度170度，ffffff 0%，E5 100%； 边框：1px实心RGBA255255,0.5； } 获得 请试试这个：

<div class="node" draggable="true" ondragstart="console.log(event);">
  <div class="node-header">
    <div class="node-title">Gain</div>
  </div>
  <div class="node-body">
  <i class="fa fa-volume-up fa_custom"></i>
    <div class="node-cutout-left" style="top:20px;"></div>
    <div class="node-cutout-left" style="top:70px;"></div>
  </div>
</div>

---

JSIDLE链接：https://jsfiddle.net/jdqht5ch/好的，给你。也许可以用更少的代码实现，但这只是一个开始

只有梯度是个小问题

身体{ 字体系列：SegoeUI； 背景色：ccc； } * { 框大小：边框框； } .节点{ 光标：移动； 位置：绝对位置； 顶部：40px； 左：60px； 宽度：180px； } .节点头{ 最小高度：20px； 填充：6px 12px； 背景色：489ddb； 颜色：fff； 字号：12号； 字号：100； } .节点体{ 位置：相对位置； 最小高度：100px； 左侧填充：19px； } .节点内容{ 填充：12px 24px； 背景：fff； 背景：线性梯度170度，ffffff 0%，E5 100%； 宽度：100%； 边框：1px实心RGBA1221672000.7； 左边界：无； 边界顶部：无； 最小高度：145px； } .节点断路器{ 溢出：隐藏； 宽度：19px； 位置：绝对位置； 左：0； 排名：0； 高度：200px； } .节点广场{ 位置：绝对位置； 左边框：1px实心rgba122、167、200、0.7； 边框底部：1px实心rgba122、167、200、0.7； 宽度：19px； 高度：18px； z指数：1； 背景色：EAEA； } .轮{ 填充：18px； 位置：相对位置； 溢出：隐藏； 显示：块； 宽度：0px； } .回合：之前{ 内容：； 位置：绝对位置； 宽度：35px； 高度：35px； 边框：1px实心RGBA1221672000.7； 边界半径：100%； 盒影：0 200px eaeaea； z指数：1 } .回合：之后{ 背景色：RGBA1221672000.7； 内容：； 位置：绝对位置； 左：0； 宽度：1px； z指数：1； 高度：18px； 显示：内联块； } .圆形.顶部：之后{ 利润上限：-18px； } 圆顶：之前{ 左-18px； } .圆形.底部：之前{ 左-18px； 顶部：-18px； } 获得

---

既然你说现有的解决方案对你来说不可行，我怀疑你把自己画进了设计的角落。我唯一的建议是对容器使用SVG元素…@Paulie_D好吧，因为我几乎被这个问题困住了，我想我可能需要求助于SVG解决方案。如果你有一个在你的股票，请不要犹豫分享它，我。。。嗯，我不会说我熟悉SVG。不管怎样，我非常感谢你的建议。我承认我仍在掌握SVG，但当涉及到自定义形状时，通常最简单的答案是启动Illustrator或Sketch，将元素创建为SVG，并将其导出为SVG元素而不是图像。理论上，剪辑会给你所需的效果：，但即使是一个简单的例子，我也很难做到。我感谢你的帮助，但我已经做好了一切，除了剪纸。我上面提供的是一个例子。不幸的是，你回答了这个问题。这是一个很好的方法，但本质上这就像是一个带方框阴影的圆圈，用来填充.node的相关左侧部分。你有没有这样的例子，或者你能告诉我为什么这不能回答你的问题？好吧，你说了

---

你自己：只有梯度是个小问题。是的，我知道。那部分花了太多时间。我不知道这对你来说是不是一件大事，所以我想你可以忽略梯度。不幸的是，这是一个重要的部分。不管怎样，我非常感谢你的帮助。

body {
  font-family: "Segoe UI";

}
.fa_custom{position: absolute;
    left: -11px;
    z-index: 1000000;
    color: #fff;
    top: 32px;}
.node {
  cursor: move;
  position: absolute;
  top: 40px;
  left: 60px;
  width: 180px;
  border: 1px solid rgba(122, 167, 200, 0.7);
  box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
}

.node-header {
  min-height: 20px;
  padding: 6px 12px;
  background-color: #489ddb;
  color: #fff;
  font-size: 12pt;
  font-weight: 100;
}

.node-body {
  position: relative;
  min-height: 100px;
  padding: 12px 24px;
  background: #ffffff;



}

.node-cutout-left {
  position: absolute;
  background-color: #eaeaea;
  left: -1px;
  width: 18px;
  height: 36px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;

  border: 1px solid rgba(122, 167, 200, 0.7);
  border-left: none;
  box-shadow: -1px 1px 1px rgba(0,0,0,0.05) inset;
}

.node-cutout-left::after {
     content: '';
    display: block;
    position: absolute;
    left: -19px;
    top: 3px;
    height: 30px;
    width: 33px;
    border-radius: 64%;
    background-color: #489DDB;
}