7

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

在此处输入图像描述

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

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

在此处输入图像描述

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

4

3 回答 3

7

使用 box-shadow 切割出心形

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

截屏

碎片

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

1 - 圆角

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

新月形

2 - 角度

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

有角度的形状

3 - 填充物

我们现在需要填补空白。这是由.box-shape容器的伪元素完成的 -.shape-box:before和.shape-box:after. overflow: hidden多余的部分被整齐地切断.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>

于 2014-12-02T15:54:13.810 回答
5

这可以通过 svg 渐变、多个背景和一些创意平铺/放置的组合来完成。来自我工作的 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这会在方形元素的中间形成一个心形切口。可以对其进行修改以适合您想要的任何尺寸元素。

更新：这是一个更复杂的小提琴，它使用六个渐变而不是四个，但看起来更好一些。

于 2013-01-17T21:49:34.820 回答
1

基于 Mark Hubbart 所做的工作，我能够在这个小提琴中将其推向更高级的形式

这还不是 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;
}
于 2013-06-29T22:39:45.693 回答