CSS 高级形状（背景切出的心形）

Question

基本上，我只想在 CSS 中创建一个与心形相反的形状（所以没有图像）。我不知道如何正确解释，所以这是一张图片：

如您所见，蓝色是背景，但我要创建的形状不是心形，而是黑色矩形的形状。

如果我有以下形状（灰色而不是黑色）

我可以复制它然后旋转它，这将得到我正在寻找的形状。

Answer 1

使用 box-shadow 切割出心形

让我们创建这个——蓝色是<body>的背景色

碎片

请随意直接跳到此答案底部的完整演示 :)

1 - 圆角

圆形的左上角和右上角是用box-shadow 在两个伪元素上创建的，border-radius: 50% — .heart:before 和 .heart:after — 它们形成两个新月形，如下所示：

2 - 角度

有角度的形状是由.heart 上的box-shadow 创建的。结合这两个圆圈，看起来是这样的：

3 - 填充物

我们现在需要填补空白。这是由.box-shape 容器的伪元素——.shape-box:before 和.shape-box:after 完成的。多余的部分用.shape-box 上的overflow: hidden 整齐地切断。结合我们上面的部分，它们看起来像这样：

完整的例子

将它们组合在一起，我们就得到了这个漂亮的心形。全部包含在.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>

Answer 2

这可以通过 svg 渐变、多个背景和一些创意拼贴/放置的组合来完成。来自我的working jsfiddle 的 CSS 示例（没有供应商前缀，即 -webkit 和 -moz）：

height: 400px;
width: 400px;
background-image:
  radial-gradient(75% 85.5%, circle, transparent 25%, black 26%),
  radial-gradient(25% 85.5%, circle, transparent 25%, black 26%),
  linear-gradient(225deg, transparent 25%, black 25%),
  linear-gradient(135deg, transparent 25%, black 25%);
background-size: 200px 200px;
background-position: top left, top right, bottom left, bottom right;
background-repeat: no-repeat;

这会在400px 方形元素的中间形成一个心形切口。可以对其进行修改以适合您想要的任何尺寸的元素。

更新：here’s a more complex fiddle 使用六个渐变而不是四个，但看起来更好一些。

Answer 3

基于 Mark Hubbart 所做的工作，我能够将其推向更高级的形式 this fiddle

这还不是 100% 完成，因为它需要一些媒体查询才能在更多浏览器上工作，但它确实显示了为同一目标而更灵活地工作的开始。

#backgrounder {
z-index: 2;
background-image: 
   radial-gradient(68% 100%, circle, transparent 48%, white 30%), 
   radial-gradient(32% 100%, circle, transparent 48%, white 30%), 
   radial-gradient(110% 1%, circle, transparent 65%, white 30%), 
   radial-gradient(-8.5% 1%, circle, transparent 65%, white 30%), 
   linear-gradient(220deg, transparent 41%, white 30%), 
   linear-gradient(139deg, transparent 41%, white 30%);


 background-image: 
    -webkit-radial-gradient(68% 100%, circle, transparent 48%, white 30%), 
    -webkit-radial-gradient(32% 100%, circle, transparent 48%, white 30%), 
    -webkit-radial-gradient(110% 1%, circle, transparent 65%, white 30%), 
    -webkit-radial-gradient(-8.5% 1%, circle, transparent 65%, white 30%), 
    linear-gradient(220deg, transparent 41%, white 30%), 
    linear-gradient(139deg, transparent 41%, white 30%);

 background-size: 51% 31%, 50% 31%, 51% 50%, 50% 50%, 51% 51%, 50% 51%;
 background-position: top left, top right, 0% 30%, 100% 30%, bottom left, bottom right;
 background-repeat: no-repeat;
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
}