css - CSS の高度な形状 (背景から切り取られたハート)

Question

基本的には、CSS のみ (画像なし) でハート型の反対の形状を作成したいと考えています。うまく説明できないので、以下に画像を載せておきます。

ご覧のとおり、青は背景ですが、作成したい形状はハートではなく、黒い長方形の形状です。

もし私が次の形をしていたら (THE GRAY NOT THE BLACK)

複製してから回転させると、探している形になります。

Answer 1

これは、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正方形の要素の中央にハート形の切り欠きが作成されます。必要なサイズの要素に合わせて変更できます。

更新:これは、4 つではなく 6 つのグラデーションを使用する、より複雑なフィドルですが、見た目は少し良くなっています。

Answer 2

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;
}