基本上,我想在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>
