15

ジグザグの境界線を持つヘッダーに取り組んできました。これを行う 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/3401493

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

4

3 に答える 3

21

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

また、IE9 を除く現在のすべてのブラウザー バージョンは、CSS グラデーション (ジグザグ パターンを取得できるようになります) との両方をサポートしていますがborder-image、最後にチェックしたとき (かなり数か月前だったので、もう一度テストした方がよいでしょう)、border-imageWebKitでのみ機能するグラデーション。さらに、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)。

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

于 2012-08-20T02:21:44.170 に答える
4

最小限の 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 Custom propertiesを使用できます。彼らは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>

小さなメモ:

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

color-stop の位置が、リスト内のその前の color-stop の指定された位置よりも小さい場合、その位置を、その前の color-stop の指定された最大の位置に等しくなるように設定します。

于 2017-06-21T11:15:59.813 に答える