ああ、三角形のパンムーブリボンを作る多くの方法！

三角形のパンパン粉ストリップを作るさまざまな方法

この記事では、ステップバイステップのブレッドクランブナビゲーションに見られる各ブロックのV字型の形状とノッチと同様に見える一連の相互接続リンクを作成する方法について説明します。

このスタイルは、マルチステップフォームやWebサイトBreadcrumb Navigationなど、Webデザインで一般的です。これらのスタイルを「バンディング」と呼び、理解しやすくします。

多くのWeb要素と同様に、これらのストライプをさまざまな方法で作成できます！ CSSの三角形、SVG背景、CSSクリップパスプロパティを使用するなど、複数の方法を備えたデモページを作成しました。

HTML構造

各デモンストレーションのHTML構造は、基本的に同じです。<nav></nav>要素へのリンクと子要素として。

<nav aria-label="breadcrumbs" role="navigation"><a href="https://www.php.cn/link/3dc023ccc7e0bd23ce2d4427756fd03c">ホームページ</a>
  <a href="https://www.php.cn/link/3dc023ccc7e0bd23ce2d4427756fd03ccategories/articles/">ブログ</a>
  <a aria-current="page" href="https://www.php.cn/link/3dc023ccc7e0bd23ce2d4427756fd03carticles/building-an-animated-sticky-header-with-custom-offset/">記事</a>
</nav>

A11Yスタイルガイドによると、これらの要素はアクセシビリティ基準に準拠する必要があることに注意してください。コンポーネントを設計するときは、アクセシビリティを考慮し、最初にアクセシビリティを導入することが重要です。「アクセシビリティを追加するのを忘れない」問題を避けるための最良の方法です。

基本的なスタイル

このタイプのスタイルのために、要素サイズが正しいことを確認する必要があります。これを行うには、 .ribbonのフォントサイズ（これらの要素を「バンド」と呼ぶ）を定義し、要素をラップし、子要素（リンク）でEMユニットを使用します。

 /*ラッピング要素のフォントサイズを定義します*/
.ribbon {
  フォントサイズ：15px;
}

/* EMユニットを使用して、ストライプ要素のサイズを定義します*/
.ribbon__element {
  Font-Size：1.5EM;
  文字分割：0.01em;
  Line-Height：1.333em;
  パディング：0.667EM 0.667EM 0.667EM 1.333EM;
}

この手法は、同じサイズを使用して三角形を計算するため、各ストリップの三角形の形状サイズを定義するのに有益です。 EMユニットを使用して、ストライプ要素のサイズを計算するため、ラッパー要素のフォントサイズを再定義することにより、すべての要素をサイズ変更できます。

レイアウトにはCSSグリッドを使用しましょう。これは、より広い範囲のブラウザ対応アプローチを使用して行うことができますが、サポートのニーズに依存します。

4つの列を定義します。

• ストライプ要素には3つの列が使用されます
• 列は、間隔の問題を解決するために使用されます。現状では、右矢印の形状はストリップアセンブリの外側に配置され、元のレイアウトが台無しになる可能性があります。

 /*パッケージング要素* CSSグリッドは使用しますが、ブラウザのサポート要件を満たしていることを確認してください。
 * Autoprefixerがベンダーのプレフィックスと属性に使用されていると仮定します。
 */

.ribbon {
  ディスプレイ：グリッド;
  グリッドギャップ：1px;
  Grid-Template-Columns：Repeat（auto-fill、1fr）1em; /*サイズの問題を解決するために、3つのストライプ要素を狭い列で自動的に満たす*/
}

ストリップ要素の伸びを避けたい場合は、メッシュを異なる方法で定義できます。たとえば、 max-contentを使用して、コンテンツのサイズに応じて列をサイズ変更できます。 （ただし、 max-content一部の主要なブラウザではまだサポートされていないことに注意してください。）

 /*最大コンテンツサイズに従ってストライプ列を調整する*/
.ribbon-- auto {
  Grid-Template-Columns：Repeat（3、Max-Content）1EM;
}

レイアウトするにはさまざまな方法があると思います。複雑な計算なしに縞模様の要素間の正確なギャップを定義するため、私はこのアプローチが好きです。

アクセシビリティは、ARIA属性を追加するだけではありません。また、色のコントラストと読みやすさ、およびホバーとフォーカスの状態を追加することも含まれます。アウトラインスタイルが気に入らない場合は、Box-Shadowなどの他のCSSプロパティを使用できます。

 /*現在のリンク色を使用しますが、ホバーにアンダースコアを追加します*/
.ribbon__element：ホバー、
.ribbon__element：Active {
  色：継承;
  テキスト装置：下線;
}

/*デフォルトのアウトラインスタイルをクリアし、埋め込みボックスシャドウを使用してフォーカス状態を示します*/
.ribbon__element：Focus {
  Box -Shadow：Inset 0 -3px 0 0＃343435;
  アウトライン：なし;
}

一意の三角形の形を作成します

各ストリップの最後に三角形を定義するときに複数のオプションがあります。我々はできる：

1. 擬似要素と境界で三角形を作成します
2. 擬似要素でSVG背景画像を使用します
3. インラインSVG画像を使用します
4. polygon()関数を使用してクリップパスを作成します

それぞれを掘り下げましょう。

方法1：境界線方法

まず、要素の幅と高さをゼロに設定して、三角形を描くために使用する擬似要素を妨げないようにする必要があります。次に、境界線を使用して三角形を描画し、具体的には、背景の色に合った固体の左の境界を定義し、ストリップの残りの部分とブレンドするようにします。次に、上部と下部の境界線を定義し、透明に設定しましょう。ここでのトリックは、境界線のサイズを計算することです。

ストライプ要素のコンテンツサイズは、row high value plus上部および下部のパディングです。

 <code>1.333em 0.667em 0.667em = 2.667em</code>

これは、上部と下部の境界線がこのサイズの半分であることを意味します。残っているのは、要素をコンポーネントの正しい側に絶対に配置することです。

 /*左矢印*/
.ribbon-- alpha .ribbon__element：前{
  /*コンテンツサイズをゼロにする*/
  コンテンツ： '';
  高さ：0;
  幅：0;

  /*境界線を使用して、擬似要素をストリップサイズに合わせる*/
  国境圏：1.333em固体透明。
  国境左：0.667EMソリッド#FFF;
  ボーダートップ：1.333em固体透明。

  /*要素をストライプ要素の左側に絶対に配置*/
  位置：絶対;
  上：0;
  下：0;
  左：0;
}

/*右矢印*/
.ribbon-- alpha .ribbon__element：後{
  /*コンテンツサイズをゼロにする*/
  コンテンツ： '';
  高さ：0;
  幅：0;

  /*境界線を使用して、擬似要素をストリップサイズに合わせる*/
  国境圏：1.333em固体透明。
  国境左：0.667EMソリッド;
  ボーダートップ：1.333em固体透明。

  /*要素をストライプ要素の右側に絶対に配置し、それを外に押します*/
  位置：絶対;
  上：0;
  右：0;
  下：0;
  -webkit-transform：transtex（0.667em）;
  変換：transtex（0.667em）;
}

直角三角形はストリップの背景色と一致する必要があるため、各ストリップの擬似エレメントに正しい境界色の色を追加することを忘れないでください。

 /*最初の要素の右矢印*/
.ribbon-- alpha .ribbon__element：nth-​​child（1）：後{
  国境左の色：＃11d295;
}

/* 2番目の要素の右矢印*/
.ribbon--アルファ.ribbon__element：nth-​​child（2）：後{
  国境左の色：＃ef3675;
}

/* 3番目の要素の右矢印*/
.ribbon-- alpha .ribbon__element：nth-​​child（3）：後{
  国境左の色：＃4CD4E9;
}

それでおしまい！

方法2：背景画像方法

背景画像を使用して三角形を作成することもできます。これには、デザインに一致する画像を作成する必要があります。これは少し面倒ですが、それでも完全に可能です。 SVGは、任意の解像度で滑らかになるため、ここで使用します。

Border Triangleメソッドとは異なり、擬似要素の高さをストライプ要素の高さ（または100％）に合わせたいと考えています。コンポーネントの幅は、ボーダートライアングルの左境界幅と一致する必要があります。この場合、0.66666666です。次に、白い三角形を左三角形の背景画像として使用し、次に右三角形のカラートライアングル画像として使用する必要があります。繰り返しますが、絶対的な位置決めを使用して、三角形をストライプ要素の正しい側に配置します。

 /*左矢印*/
.ribbon--ベータ.ribbon__element：前{
  /*矢印のサイズを定義*/
  コンテンツ： '';
  高さ：100％;
  幅：0.6666666m;

  /*背景色に一致する背景画像を定義します*/
  背景 - イメージ：url（data：image/svg xml; base64、phn2zybozwlnahq9ijqwiib223qm94psiwidagmtagndaiihdpzhropsixmceg1sbnm9imh0dha6ly93d3cudzmub3jnlzmbmibmibmibmibmibmibmibmibmibmawxiebmibmawxiwxmibmwxmibmwxmibmwxmibmwxmibmwxmibmwxmibmawxmibmwxmibmibmibmawx jzmzmij48cgf0acbkpsjtnsaxnsaymcaxmggtndb6iibmawxslxj1bgu9imv2zw5vzgqiihryyw5zm9ybt0ibwf0cmml4kdagltegltegmcaynasnskilz48l3n2zz4）;
  背景ポジション：中央の左。
  バックグラウンドリピート：ノーリピート。
  バックグラウンドサイズ：100％;

  /*要素をストライプ要素の左側に絶対に配置*/
  位置：絶対;
  下：0;
  上：0;
  左：0;
}

/*右矢印*/
.ribbon-ベータ.ribbon__element：後{
  /*矢印のサイズを定義*/
  コンテンツ： '';
  高さ：100％;
  幅：0.667EM;

  /*背景画像プロパティを定義*/
  背景ポジション：中央の左。
  バックグラウンドリピート：ノーリピート。
  バックグラウンドサイズ：100％;

  /*要素をストライプ要素の右側に絶対に配置し、それを外に押します*/
  位置：絶対;
  上：0;
  右：0;
  下：0;
  -webkit-transform：transtex（0.667em）;
  変換：transtex（0.667em）;
}

/*最初の要素の背景色に一致する背景画像を定義します*/
.ribbon-ベータ.ribbon__element：nth-​​child（1）：後{
  背景画像：url（data：image/svg Xml; base64、phn2zybozwlnahq9ijqwiib2awv3qm94psiwidagmtagndaiihdpzhropsixmcigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavcpp sjtnsaxnsaymcaxmggtndb6iibmawxspsijmtfkmjk1iibmawxslxj1bgu9imv2zw5vzgqiihryyw5zm9ybt0ibwf0cmml4kdagltegltegmcaynsnsnsnsnsnkilz48l3z48l3z48l3z48l3z48l3z48l3tgltegm
}

/* 2番目の要素の背景色に一致する背景画像を定義します*/
.ribbon-ベータ.ribbon__element：nth-​​child（2）：後{
  背景画像：url（data：image/svg Xml; base64、phn2zybozwlnahq9ijqwiib2awv3qm94psiwidagmtagndaiihdpzhropsixmcigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavcpp sjtnsaxnsaymcaxmggtndb6iibmawxspspijzwyznjc1iibmawxslxj1bgu9imv2zw5vzgqiihryyw5zm9ybt0ibwf0cmml4kdaglteggltegmcaynsnsnsnsnkilz48l3z48l3z48l3z48l3z48l3z48l3z48l3tgltegm
}

/* 3番目の要素の背景色に一致する背景画像を定義します*/
.ribbon-ベータ.ribbon__element：nth-​​child（3）：後{
  背景画像：url（data：image/svg Xml; base64、phn2zybozwlnahq9ijqwiib2awv3qm94psiwidagmtagndaiihdpzhropsixmcigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavcpp sjtnsaxnsaymcaxmggtndb6iibmawxspspijngngngu5iibmawxslxj1bgu9imv2zw5vzgqiihryyw5zzm9ybt0ibwf0cmml4kdagltegltegmcaynaynskilz48l3333z48l3333z48l3333333333
}

それでおしまい！

残りは元のテキストに似ていますが、ステートメントが調整されて置き換えられ、元のテキストは変更されていません。スペースの制限のため、ここで繰り返しません。残りの部分を継続するには、元のテキストを参照してください。

以上がああ、三角形のパンムーブリボンを作る多くの方法！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。