Question

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

除了半圆切口外，我已经能够成功复制（接近）预期设计的每个方面。

我能够得到的最接近的是通过为与背景匹配的剪切圆设置background-color，以及在相应侧面上插入阴影和边框来屏蔽节点主体的各个部分。

之后，我向相反的方向添加了一个扩展，以便节点投射的任何阴影也被有效地屏蔽掉。结果如下：

body {
  font-family: "Segoe UI";
  background-color: #eaeaea;
}

/* --- cutout --- */

.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: -18px;
  top: 0px;
  height: 36px;
  width: 18px;
  background-color: #eaeaea;
}

/* --- end of cutout --- */

.node {
  cursor: move;
  position: absolute;
  top: 12px;
  left: 20px;
  width: 160px;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
  border: 1px solid rgba(122, 167, 200, 0.7);
}

.node-header {
  min-height: 20px;
  padding: 6px 12px;
  background-color: #489ddb;
  color: #fff;
  font-size: 12pt;
  font-weight: 100;
  box-shadow: 0px 0px 0px 1px #489ddb; /* overlay node-border */
}

.node-body {
  position: relative;
  min-height: 100px;
  padding: 12px 24px;
  background: #ffffff;
  background: linear-gradient(170deg,  #ffffff 0%,#e5e5e5 100%);

  border: 1px solid rgba(255,255,255,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">
    <div class="node-cutout-left" style="top:20px;"></div>
    <div class="node-cutout-left" style="top:70px;"></div>
  </div>
</div>

但是，我需要在屏蔽区域中使用透明背景。我怎么能做到这一点？

我还为那些希望加入这次头脑风暴的人准备了一个JSFiddle（说明问题），并且我会非常感激他们的帮助。

关于SO的问题到目前为止未能解决我的问题，因为他们使用用作剪切的元素的框阴影来填充剪切元素的渲染区域（这将取消我的情况下的渐变背景）...

...或SVG剪辑，我 - 在其生命周期中 - 在应用于具有边框样式的HTML元素时找不到工作示例。

Answer 1

好的，你来了。可能它可以用更少的代码实现，但它是一个开始。

只有渐变是一个小问题..

＆＃13;

false

＆＃13;

body {
  font-family: "Segoe UI";
  background-color: #ccc;
}

* {
  box-sizing: border-box;
}

.node {
  cursor: move;
  position: absolute;
  top: 40px;
  left: 60px;
  width: 180px;
}

.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-left: 19px;
}

.node-content {
  padding: 12px 24px;
  background: #fff;
  background: linear-gradient(170deg, #ffffff 0%, #e5e5e5 100%);
  width: 100%;
  border: 1px solid rgba(122, 167, 200, 0.7);
  border-left: none;
  border-top: none;
  min-height: 145px;
}

.node-cutout {
  overflow: hidden;
  width: 19px;
  position: absolute;
  left: 0;
  top: 0;
  height:200px;
}

.node-square {
  position: absolute;  
  border-left: 1px solid rgba(122, 167, 200, 0.7);
  border-bottom: 1px solid rgba(122, 167, 200, 0.7);
  width: 19px;
  height: 18px;
  z-index: 1;
  background-color:#eaeaea;
}


.round {
  padding: 18px;
  position: relative;
  overflow: hidden;
  display: block;
  width: 0px;
}

.round:before {
  content: '';
  position: absolute;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(122, 167, 200, 0.7);
  border-radius: 100%;
  box-shadow: 0 0 0 200px #eaeaea;
  z-index: 1
}

.round:after {
  background-color: rgba(122, 167, 200, 0.7);
  content: '';
  position: absolute;
  left: 0;
  width:1px;
  z-index: 1;
  height: 18px;
  display: inline-block;
}

.round.top:after {
  margin-top: -18px;
}

.round.top:before {
  left: -18px;
}

.round.bottom:before {
  left: -18px;
  top: -18px;
}

＆＃13;

Answer 2

请试试这个：

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

CSS：

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

JSFiddle Link：https://jsfiddle.net/jdqht5ch/

半圆形，透明镂空，有边框div，渐变背景

2 个答案: