2

CSS3を使用して以下のようなことを行う「簡単な」方法があるかどうか疑問に思っています。画像や絶対配置などの使用を避けたいので、これを実現するために何らかのCSSメソッドを使用することをお勧めします。

ここに画像の説明を入力

サイズと色がすべて異なるさまざまな要素に同じスタイルを使用するため、このスタイルにも固定の高さを使用することは避けたいと思います。

4

4 に答える 4

3

CSS で単純なクリップパスを使用できます。

clip-path:polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);

結果 (Chrome):

ここに画像の説明を入力

ONLINE DEMO

ただし、サポートはすべてのブラウザーでまだそれほど優れているわけではないことに注意してください。現在、私が知る限り、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でこれを生成します：

ここに画像の説明を入力

(このコードで更新されたフィドル)

于 2013-07-17T23:25:34.783 に答える