Nasıl böyle bir şekil bir web sayfasında görüntülemek için oluşturabilirim?

Kullanmak istemiyorumgörüntüleriÖlçekleme bulanık alacağı beri

İle çalıştımCSS:

.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>

Bu gerçekten kötü oldu.

Ve SVG ile çalıştım:

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

Şekil aldın, ama alt kısmı kavisli değildi.

Bir şekilde bir HTML sayfası olarak kullanılabilir bu şekli oluşturmak için var mı?

Yaklaşım SVG:

Çift eğrisi ile kolayca elde edebilirsinizsatır içi SVGve kavisli izin vermez <polygon/> element yerine <path/> eleman şekilleri.

Aşağıdaki örnek <path/> öğesini kullanır:

• 2 üst eğrileri (Q ile başlayan satırlar) 2 quadratic bezier curve commands
• Büyük bir alt için 1 arc command (A ile başlayan satır)

<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 çift eğrileri ile şekil bu tür yapmak için harika bir araçtır. Bu SVG/CSS bir karşılaştırma ile post about double curves kontrol edebilirsiniz. Bu durumda SVG kullanmanın avantajları şunlardır:

• Eğri kontrol
• Kontrol (opaklık, renk) doldurun
• İnme kontrolü (opaklık, renk, genişlik)
• Kodu miktarı
• Zaman ve şeklini oluşturmak ve korumak için
• Oyunlara hazır olun
• Hayır HTTP isteği ise kullanılan satır içi örnekte olduğu gibi

Tarayıcı desteğisatır içi SVG Internet Explorer 9 için geri gider. Daha fazla bilgi için canIuse bkz.