基本的には、ハートシェイプの反対側のCSSのみ（つまりイメージなし）でシェイプを作成したいと考えています。それは、あなたが見ることができるようCSSの高度なシェイプ（背景がハートカット）
青、背景ですが、私が作成したい形状が心ではありません。私はきちんとので、ここでそれを説明する方法がわからないことはイメージです黒い矩形の形状です。
私はそれを複製し、それを回転させ、それは私が探しています形状を与える可能性があり、以下の形状（GRAYはありませんTHE BLACK）
を持つことになります。
<body>
スキップすること自由に感じているこの—を作成してみましょうボックスシャドウを使用して切り取りますこの答えの一番下の完全なデモに直接:)
border-radius: 50% —
.heart:beforeと
.heart:after —と2つの擬似要素に
box-shadowで作成され
彼らはこのように見える2つの三日月形状を形成：
を
傾斜した形状は、c box-shadowによって.heartにreated。 - 私たちは今のギャップを埋めるために必要な充填材
.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>**真剣に改善** - 私はフィドルの心を見ない、これが受け入れられたので、私は本当にそれをきれいにし、より良い説明を提供する必要がありました。あなたはそれが@onlineracoonと将来の読者が好きなと思います:) – misterManSam
これは、svgグラデーション、複数の背景、少し独創的なタイル/配置の組み合わせで行うことができます。私working jsfiddle（すなわち-webkitと-moz、ベンダープレフィックスなし）からのサンプルCSS：
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は、4つではなく6つのグラデーションを使用しますが、少し上手く見えます。マークHubbartが、私はそれがより多くのブラウザ間で動作するようにいくつかのメディアクエリが必要になりますので、これはまだ100％完了していないthis fiddle
に少しより高度なフォームにこれをプッシュすることができたんでした仕事に基づいて
かなり印象的ですが、これは間違いなくCSSで手に入るものです。多くのupvotesの価値がある！ –
素晴らしい感謝！ – onlineracoon
私はすべての接頭辞（私が信じるクロームではないはずです）http://jsfiddle.net/BueHh/12/ – Pevara
が、同じ目的のためにはるかに柔軟な作業の開始を示しています。
#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;
}
マスクですが、私はあなたが別の要素を使用してマスクすることができると信じていない - それは、静止画像にする必要があります。 –
@ChristianVarga私は知っている、それはPhotoshopの言葉ですが、CSS - > border radiusなどで可能でなければなりません。 – onlineracoon
IE8についてはどうですか？位置が*少しずれているブラウザ？ – Mooseman