CSS3を使用して以下のようなことを行う「簡単な」方法があるかどうか疑問に思っています。画像や絶対配置などの使用を避けたいので、これを実現するために何らかのCSSメソッドを使用することをお勧めします。
サイズと色がすべて異なるさまざまな要素に同じスタイルを使用するため、このスタイルにも固定の高さを使用することは避けたいと思います。
CSS3を使用して以下のようなことを行う「簡単な」方法があるかどうか疑問に思っています。画像や絶対配置などの使用を避けたいので、これを実現するために何らかのCSSメソッドを使用することをお勧めします。
サイズと色がすべて異なるさまざまな要素に同じスタイルを使用するため、このスタイルにも固定の高さを使用することは避けたいと思います。
CSS で単純なクリップパスを使用できます。
clip-path:polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
結果 (Chrome):
ただし、サポートはすべてのブラウザーでまだそれほど優れているわけではないことに注意してください。現在、私が知る限り、FF では動作しません(代わりに SVG を FF に使用できると思います)。
アップデート
OK、SVG で遊んだ後 (私は SVG の専門家ではありません)、FF で動作する「プロトタイプ」を思いつきました。
HTML の場合:
<!-- For firefox -->
<svg class="svg-graphic" width="250" height="36" viewBox="0 0 250 36" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<clipPath id="mask">
<polygon points="0, 0, 250, 0, 235, 18, 248, 35, 1, 35, 15, 18" />
</clipPath>
</svg>
次に、その ID を CSS でクリッピング パスとして設定します。
clip-path:url(#mask);
そして、Firefoxでこれを生成します:
(このコードで更新されたフィドル)