web-dev-qa-db-ja.com

テクスチャ背景のCSSジグザグボーダー

私はジグザグの境界線を持つヘッダーに取り組んできました。これを行う1つの方法は、画像を使用してジグザグ効果を作成することです。

（1）画像を使用せずにCSSで実用的なクロスブラウザージグザグ境界線を作成する方法はありますか？

また、ジグザグに伸びるこのヘッダーにテクスチャ背景を配置しようとしています。ただし、ヘッダーの垂直方向のサイズが変更される可能性があり、ヘッダーを単一の画像として実装できません。

ジグザグエッジとヘッダー要素の両方にテクスチャを追加しようとすると、テクスチャが同期しなくなる可能性があります。

（2）同期を外すことなくジグザグに広がるテクスチャ背景を実装するためのアイデアはありますか？

私の[古い]コード（テクスチャと共に）はここにあります jsFiddle 。

body {
  padding: 20px;
}

header {
  width: 240px;
  background-color: #BCED91;
}

header:after {
  content: " ";
  display: block;
  position: relative;
  width: 240px;
  bottom: -15px;
  height: 15px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAPCAYAAACWV43jAAAAw0lEQVRIx83RsQ3CMBCF4T83AZKLVOmyBa1HSIlXwKySGaDOBClZAToWQIpETQONyxAS+2J4pe9knd5X9EP7QicPYAsUwBnYaHwqSsd1QGmNv1rjL0AZ3pJTKDTorPGnsUE/tDvg+KsG70D96TiAMKvDbtYDO6Cyxt++LYadKpY8hthNtTaVGHLRJJ3R5mJy0SbVJp9D7FJaSyWXNUk1yGVt0lTyMWK3ZmtLySUnaQy55CZdSi7AHmis8U/+JOGWBji8AaYPVy6VELZvAAAAAElFTkSuQmCC) repeat-x;
}

img {
  margin-top: 50px;
}
<header>
  <br />
  <br />
  <br />
  <br />
</header>

<img src="http://i.imgur.com/qKsVr.png" />

編集＃1：

コードをありがとうアナ。私はそれを取り、それを改善しました。

http://dabblet.com/Gist/340149

一貫した背景が可能になるとは思いません。

htmlcsscss-shapeszigzag
13
ambiguousmouse

border-imageを使用する場合、IEはサポートしていないため、クロスブラウザソリューションではありません。

また、IE9を除く現在のすべてのブラウザーバージョンは両方のCSSグラデーションをサポートしていますが（これにより、 ジグザグパターン を取得できます。 =）とborder-image、前回チェックしたとき（かなり数か月前だったので、もう一度テストしたほうがいいです）、border-imageのグラデーションを使用するとWebKitでのみ機能しました。さらに、WebKitでも、これが複数のグラデーションで機能するとは思いません（1つの境界線画像のみを設定でき、1つのグラデーションは1つの画像であるため）、ジグザグパターンには2つのグラデーションが必要です。

CSSのジグザグパターンのコードは次のとおりです。

background: linear-gradient(#BCED91 49%, transparent 49%),
        linear-gradient(-45deg, white 33%, transparent 33%) 0 50%,
        white linear-gradient(45deg, white 33%, #BCED91 33%) 0 50%;
    background-repeat: repeat-x;
    background-size: 1px 100%, 40px 40px, 40px 40px;

この下のテクスチャと同期しているテクスチャが必要な場合は、同じ間隔で繰り返されることを確認する必要があります（40pxですが、20pxを選択することもできます）。

編集：ポリフィルに関しては、リストされているものの1つを試すことができます ここ ： CSS3 PIE または cssSandpaper

19
Ana

（最新のブラウザーでは）SVGを使用して単純な図面を作成し、それらを データURI として埋め込まれたCSS背景画像として使用できます。

SVGは次のようになります：

body {
  background: #888;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px">
  <polygon points="0,4 4,0 8,4" fill="#CC0000" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px">
  <polygon points="0,0 4,4 8,0" fill="#CC0000" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px">
  <polygon points="0,0 4,4 8,0" fill="#FFFFFF" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px">
  <polygon points="0,4 4,0 8,4" fill="#FFFFFF" />
</svg>

例1：

.zigzag-outside {
  position: relative;
  margin-top: 4px;
  margin-bottom: 4px;
  background-color: #CC0000;
  /* example content */
  padding: 1em;
  font: bold medium sans-serif;
  color: #FFFFFF;
}
.zigzag-outside:before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 4px;
  /* red up pointing triangle */
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C4%204%2C0%208%2C4%22%20fill%3D%22%23CC0000%22%2F%3E%3C%2Fsvg%3E");
}
.zigzag-outside:after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 4px;
  /* red down pointing triangle */
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C0%204%2C4%208%2C0%22%20fill%3D%22%23CC0000%22%2F%3E%3C%2Fsvg%3E");
}
<div class="zigzag-outside">Example 1</div>

例2：

.zigzag-inside {
  position: relative;
  /* example content */
  width: 600px;
  height: 100px;
  background-image: url(http://i.stack.imgur.com/uOVfl.jpg);
}
.zigzag-inside:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  /* white down pointing triangle */
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C0%204%2C4%208%2C0%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");
}
.zigzag-inside:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  /* white up pointing triangle */
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C4%204%2C0%208%2C4%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");
}
<div class="zigzag-inside"></div>
7
Salman A

最小限のCSSの改善：

div {
  background: #1ba1e2;
  position: relative;
}

div:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 30px;
  background: linear-gradient(-45deg, transparent 75%, #1ba1e2 0) 0 50%,
              linear-gradient(45deg, transparent 75%, #1ba1e2 0) 0 50%;
  background-size: 30px 30px;
}

/* Styles just for demo */
h1 {
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 0.5em;
}
<div>
  <h1>Zig Zag Borders</h1>
</div>

重複する値を削除する場合は、 CSS変数AKAカスタムプロパティ を使用できます。彼らはIEを除いてどこでも働いています。

:root {
  --background-color: #1ba1e2;
  --zigzag-item-size: 30px;
}

div {
  background: var(--background-color);
  position: relative;
}

div:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: var(--zigzag-item-size);
  background: linear-gradient(-45deg, transparent 75%, var(--background-color) 0) 0 50%,
              linear-gradient(45deg, transparent 75%, var(--background-color) 0) 0 50%;
  background-size: var(--zigzag-item-size) var(--zigzag-item-size);
}

/* Styles just for demo */
h1 {
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 0.5em;
}
<div>
  <h1>Zig Zag Borders</h1>
</div>

小さなメモ：

ゼロを使​​用します0グラデーションカラーストップで、以前の値の重複を回避します。これは、 CSS3画像の仕様 によると、カラーストップ位置を前の位置より小さくすることはできないためです。

カラーストップの位置が、リスト内のその前のカラーストップの指定された位置よりも小さい場合は、その位置を、その前のカラーストップの指定された最大位置と等しくなるように設定します。

2
Vadim Ovchinnikov