0

下端を少し下向きの矢印にするためにマスクを適用しているヒーロー画像（背景画像付きの全幅/高さ70％のdiv）があります。css クリップ パスとパーセンテージを使用して設定したので、さまざまなビューポート サイズで適切にスケーリングされます。

-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 96%, 50% 100%, 0% 96%);
clip-path: polygon(0% 0%, 100% 0%, 100% 96%, 50% 100%, 0% 96%);

Chrome などの互換性のあるブラウザーでは期待どおりに動作しますが、もちろん Firefox では失敗します。Firefox が尊重することになっている url() 関数で使用する svg を作成しようとしています。しかし三振した。

私はsvgがパーセンテージを使用できないことを理解しているので、その間のすべてに0.0 = 0％、1.0 = 100％、および0.XXを使用しようとしましたが、うまくいかないようです。または、svgがヒーロー画像をカバーするようにスケーリングされていませんdiv。

<svg width="0" height="0">
  <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 1.0 0, 1.0 0.96, 0.5 1.0, 0 0.96" />
    </clipPath>
  </defs>
</svg>

これらのパーセンテージ ベースの css ポリゴンを Firefox で動作する svg に変換する方法はありますか? また、異なるビューポート間でスケーリングするためのトリックはありますか? （できればJSを追加する必要はなく、間違いなくjQueryなしで）

Firefox の欠点がページに悪い影響を与えるわけではありませんが、すべてのブラウザーで同じように下にスクロールを促すようにするとよいでしょう。

4

0 に答える 0