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

时间：2013-01-17 19:34:50

标签： css shapes css-shapes

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

enter image description here

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

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

enter image description here

我可以复制它然后旋转它，这会给我我想要的形状。

3 个答案:

答案 0 :(得分：6)

使用box-shadow

切出心形

让我们创建它 - 蓝色是<body>

的背景颜色

Screenshot

件

可以直接跳到这个答案底部的完整演示：）

1 - 圆角

在box-shadow - border-radius: 50%和.heart:before的两个伪元素上使用.heart:after创建圆形左上角和右上角 - 它们形成两个新月形状像这样：

Crescent Shapes

2 - 角度

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

Angled Shape

3 - 填充物

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

The filler

完整示例

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

答案 1 :(得分：5)

这可以通过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使用六个渐变而不是四个，但看起来更好。

答案 2 :(得分：1)

根据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;
}
相关问题
最新问题