CSS高级形状(从背景中切出)

基本上,我想在CSS中创建一个形状,只有一个形状与心脏形状相反.我不知道如何正确解释,所以这里是一个形象：

蓝色是背景,你可以看到,但我想要创造的形状不是一颗心,它是黑色矩形的形状.

如果我有以下形状(灰色不是黑色)

我可以复制它,然后旋转它,这将给我我正在寻找的形状.

解决方法

使用盒子阴影切出心形

让我们创造一个 – 蓝色是背景颜色< body>

碎片

随意跳过这个答案底部的完整演示:)

1 – 圆角

圆形的顶部左上角和右上角用两个伪元素(border-radius：50％ – .heart：before和.heart：after)创建两个伪元素,它们形成两个新月形,如下所示：

2 – 角度

角形的形状是由.heart上的Box-shadow创建的.结合两个圈子,看起来像这样：

3 – 填料

我们现在需要填补空白.这是通过.Box-shape容器的伪元素完成的.shape-Box：before和.shape-Box：之后.超量被切断,整齐地溢出：隐藏在.shape-Box上.结合我们上面的部分,他们看起来像这样：

完整的例子

结合在一起,我们得到这个很好地切出心脏的形状.它都包含在.shape-Box中.

body {
  background: #00A2F6;
}
.shape-Box {
  height: 504px;
  width: 504px;
  position: relative;
  margin: 100px;
  overflow: hidden;
}
.shape-Box:before,.shape-Box:after {
  content: '';
  display: block;
  height: 100px;
  width: 120px;
  background: #2B2B2B;
  transform: rotate(45deg);
  left: 190px;
  position: absolute;
  top: 40px;
}
.shape-Box:after {
  width: 760px;
  height: 750px;
  Box-shadow: inset 0 0 0 220px #2B2B2B;
  top: -150px;
  left: -130px;
  background: none;
}
.heart {
  transform: rotate(45deg);
  height: 357px;
  width: 356px;
  Box-shadow: inset 0 0 0 50px #2B2B2B;
  position: absolute;
  left: 74px;
  top: 34px;
}
.heart:before,.heart:after {
  content: '';
  display: block;
  width: 151px;
  height: 151px;
  border-radius: 50%;
  Box-shadow: -40px -15px 0 20px #2B2B2B;
  position: absolute;
  left: 50px;
  top: 157px;
}
.heart:after {
  Box-shadow: -15px -40px 0 21px #2B2B2B;
  left: 156px;
  top: 51px;
}

<div class="shape-Box">
  <div class="heart"></div>
</div>