[解決済み】HTMLでティアドロップを作成する方法は？

質問

このような図形を作成してウェブページに表示するにはどうしたらよいでしょうか。

を使いたくないんです。 画像 拡大縮小するとぼやけてしまうので

で試してみました。 CSS :

.tear {
  display: inline-block;
  transform: rotate(-30deg);
  border: 5px solid green;
  width: 50px;
  height: 100px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="tear">
</div>

本当にダメになっちゃいましたね。

そして、SVGで試してみました。

<svg viewBox="0 100 100">
  <polygon points="50,0 100,70 50,100 0,70"/>
</svg>

形にはなったんですが、下の部分が曲がっていなかったんです。

このシェイプをHTMLページで使えるように作成する方法はありますか？

どのように解決するのですか？

SVGのアプローチ。

を使えば、簡単にダブルカーブを実現することができます。 インラインSVG と <path/> 要素の代わりに <polygon/> 要素では、曲線的な形状を許可していません。

次の例では <path/> という要素を持つ。

• 2 二次ベジェ曲線コマンド で始まる行は、上の2つの曲線に使用されます。 Q )
• 1 円弧コマンド は、下の大きなもの（行頭が A )

<svg width="30%" viewbox="0 0 30 42">
  <path fill="transparent" stroke="#000" stroke-width="1.5"
        d="M15 3
           Q16.5 6.8 25 18
           A12.8 12.8 0 1 1 5 18
           Q13.5 6.8 15 3z" />
</svg>

SVGは、このような2重曲線の形状を作るのに最適なツールです。以下がその例です。 ダブルカーブに関する記事 をSVGとCSSの比較で紹介しました。この場合、SVGを使用する利点はいくつかあります。

• カーブコントロール
• 塗りつぶし制御（不透明度、色）
• ストローク制御（幅、不透明度、色）
• コード量
• 形状の構築・維持にかかる時間
• スケーラブル
• HTTPリクエストなし(例のようにインラインで使用する場合)

ブラウザ対応 のインライン SVG は Internet Explorer 9 までさかのぼります。参照 キャニユー をご覧ください。