css - CSS でシェブロン チップ ブロックを作成する

Question

純粋な CSS で以下のような形状を作成することはできますか? どうすればそれを行うことができますか？

単色の背景に水平の塗りつぶされたブロックがあり、一方の端にシェブロンがメイン ブロックから分離されていることを希望します。

Answer 1

これは、背景のグラデーションをいくつか使用するだけで実現できます。

div {
    width: 300px;
    height: 50px;
    background-color: black;
    background-image:
        linear-gradient( -45deg, white 25px, transparent 25px),
        linear-gradient(-135deg, white 25px, transparent 25px),
        linear-gradient( -45deg, black 40px, transparent 40px),
        linear-gradient(-135deg, black 40px, transparent 40px),
        linear-gradient( -45deg, white 50px, transparent 50px),
        linear-gradient(-135deg, white 50px, transparent 50px);
}

フィドル: http://jsfiddle.net/jonathansampson/fxj3u/

上記のコードには、 に必要なベンダー プレフィックスがありませんlinear-gradient。プロジェクトで使用するには、すべてのプレフィックスを指定するか、-prefix-free (私が使用するツール) などのツールを参照する必要があります。

Answer 2

できますが、いくつかの異なる形状から構築する必要があります。これらの形状を次の順序で作成します。

1. 黒い長方形
2. 紫の背景に黒い三角形
3. 黒の背景に紫の三角形
4. 紫の背景に黒い三角形

シェイプの作成方法については、http://css-tricks.com/examples/ShapesOfCSS/をご覧ください。試してみて、行き詰まった場合は CSS/マークアップを元に戻してください。

うんざりすること：おそらくfloat:left;、形状が隙間なく隣り合うように使用する必要があります。