Pelbagai cara untuk membuat segitiga roti serbuk

Artikel ini meneroka cara membuat satu siri pautan yang saling berkaitan yang kelihatan sama dengan bentuk berbentuk V dan takuk di setiap blok yang dilihat dalam navigasi breadcrumb langkah demi langkah.

Gaya ini adalah perkara biasa dalam reka bentuk web, seperti bentuk pelbagai langkah dan navigasi breadcrumb laman web. Kami memanggil gaya ini "banding" untuk memudahkan pemahaman.

Seperti banyak elemen web, kita boleh membuat jalur ini dalam pelbagai cara! Saya mencipta halaman demo dengan pelbagai kaedah, seperti menggunakan segitiga CSS, latar belakang SVG, dan sifat-sifat klip CSS.

Struktur HTML

Struktur HTML bagi setiap demonstrasi pada dasarnya sama, termasuk elemen induk<nav></nav> Pautan ke elemen dan sebagai elemen kanak -kanak.

<nav aria-label="breadcrumbs" role="navigation"> <a href="http://ipnx.cn/link/3dc023ccc7e0bd23ce2d4427756fd03c">Halaman rumah</a>
  <a href="http://ipnx.cn/link/3dc023ccc7e0bd23ce2d4427756fd03ccategories/articles/">Blog</a>
  <a aria-current="page" href="http://ipnx.cn/link/3dc023ccc7e0bd23ce2d4427756fd03carticles/building-an-animated-sticky-header-with-custom-offset/">artikel</a>
</nav>

Sila ambil perhatian bahawa mengikut panduan gaya A11Y, unsur -unsur ini harus mematuhi piawaian aksesibiliti. Apabila merancang komponen, adalah penting untuk mempertimbangkan kebolehcapaian dan memperkenalkan kebolehcapaian pada awal adalah cara terbaik untuk mengelakkan masalah "lupa untuk menambah akses".

Gaya asas

Untuk jenis gaya ini, kita perlu memastikan saiz elemen betul. Untuk melakukan ini, kami akan menentukan saiz fon .ribbon (kami panggil unsur -unsur ini "band") membungkus elemen, dan kemudian gunakan unit EM pada elemen kanak -kanak (pautan).

 /* Tentukan saiz fon elemen pembalut*/
.ribbon {
  saiz font: 15px;
}

/* Gunakan unit em untuk menentukan saiz elemen jalur*/
.ribbon__element {
  saiz font: 1.5em;
  Surat-Spacing: 0.01EM;
  Talian ketinggian: 1.333EM;
  Padding: 0.667EM 0.667EM 0.667EM 1.333EM;
}

Teknik ini bermanfaat untuk menentukan saiz bentuk segitiga untuk setiap jalur, kerana kami akan menggunakan saiz yang sama untuk mengira segitiga. Oleh kerana kita menggunakan unit EM untuk mengira saiz elemen berjalur, kita boleh mengubah saiz semua elemen dengan mentakrifkan semula saiz fon elemen pembalut.

Mari kita gunakan grid CSS untuk susun atur, kerana kita boleh melakukannya. Kami boleh melakukan ini dengan menggunakan pendekatan yang lebih luas yang dibolehkan oleh penyemak imbas, tetapi ia bergantung kepada keperluan sokongan anda.

Kami akan menentukan empat lajur:

• Tiga lajur digunakan untuk elemen jalur
• Lajur digunakan untuk menyelesaikan masalah jarak. Begitu juga, bentuk anak panah yang betul akan diletakkan di luar perhimpunan jalur, yang mungkin merosakkan susun atur asal.

 /* Elemen Pembungkusan* Kami menggunakan grid CSS, tetapi pastikan ia memenuhi keperluan sokongan penyemak imbas anda.
 * Katakan bahawa autoprefixer digunakan untuk awalan dan atribut vendor.
 */

.ribbon {
  paparan: grid;
  Grid-Gap: 1px;
  Grid-template-lajur: ulangi (auto-fill, 1FR) 1EM; /* Secara automatik mengisi tiga elemen jalur dengan lajur sempit untuk menyelesaikan masalah saiz*/
}

Jika anda ingin mengelakkan elemen jalur regangan, anda boleh menentukan mesh secara berbeza. Sebagai contoh, kita boleh menggunakan max-content untuk mengubah saiz lajur mengikut saiz kandungan. (Walau bagaimanapun, ambil perhatian bahawa max-content belum disokong dalam beberapa pelayar utama.)

 /* Buat lajur jalur menyesuaikan mengikut saiz kandungan maksimum*/
.ribbon-auto {
  Grid-template-lajur: ulangi (3, maksimum-kandungan) 1EM;
}

Saya percaya terdapat banyak cara untuk susun atur. Saya suka pendekatan ini kerana ia mentakrifkan jurang yang tepat antara elemen berjalur tanpa pengiraan yang kompleks.

Kebolehcapaian adalah lebih daripada sekadar menambah atribut ARIA. Ia juga termasuk kontras warna dan kebolehbacaan, serta menambah keadaan hover dan fokus. Jika anda tidak suka gaya garis besar, anda boleh menggunakan sifat CSS lain seperti box-shadow.

 /* Gunakan warna pautan semasa, tetapi tambahkan garis bawah pada hover*/
.ribbon__element: hover,
.ribbon__element: aktif {
  Warna: mewarisi;
  Teks-penyerapan: garis bawah;
}

/* Kosongkan gaya garis besar lalai dan gunakan bayangan kotak tertanam untuk menunjukkan keadaan fokus*/
.ribbon__element: fokus {
  box -shadow: inset 0 -3px 0 0 #343435;
  Garis besar: Tiada;
}

Buat bentuk segitiga unik

Kami mempunyai pelbagai pilihan apabila menentukan segitiga pada akhir setiap jalur. Kita boleh:

1. Buat segitiga dengan elemen pseudo dan sempadan
2. Menggunakan imej latar SVG pada elemen pseudo
3. Menggunakan gambar SVG sebaris
4. Buat laluan klip menggunakan fungsi polygon()

Mari menggali setiap satu.

Kaedah 1: Kaedah Sempadan

Pertama, kita harus menetapkan lebar dan ketinggian elemen kepada sifar supaya ia tidak mengganggu unsur-unsur pseudo yang kita gunakan untuk menarik segitiga. Kita harus melukis segitiga menggunakan sempadan, khususnya, menentukan sempadan kiri pepejal yang sepadan dengan warna latar belakang, supaya ia bercampur dengan sisa jalur. Seterusnya, mari kita tentukan sempadan atas dan bawah dan tetapkannya kepada telus. Caranya di sini adalah untuk mengira saiz sempadan.

Saiz kandungan elemen jalur kami adalah baris tinggi nilai ditambah padding atas dan bawah:

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

Ini bermakna sempadan atas dan bawah kami harus separuh saiz ini. Satu -satunya perkara yang tersisa adalah untuk meletakkan unsur sepenuhnya ke bahagian yang betul komponen.

 /* Anak panah kiri*/
.ribbon-alpha .ribbon__element: sebelum {
  /* Membuat saiz kandungan sifar*/
  Kandungan: '';
  ketinggian: 0;
  lebar: 0;

  /* Gunakan sempadan untuk membuat saiz jalur pseudo-elemen*/
  Sempadan-Bottom: 1.333EM Telus pepejal;
  sempadan-kiri: 0.667EM solid #fff;
  Border-Top: 1.333EM Telus pepejal;

  /* Letakkan elemen di sebelah kiri elemen jalur*/
  Kedudukan: Mutlak;
  Atas: 0;
  Bawah: 0;
  Kiri: 0;
}

/* Anak panah kanan*/
.ribbon-alpha .ribbon__element: selepas {
  /* Membuat saiz kandungan sifar*/
  Kandungan: '';
  ketinggian: 0;
  lebar: 0;

  /* Gunakan sempadan untuk membuat saiz jalur pseudo-elemen*/
  Sempadan-Bottom: 1.333EM Telus pepejal;
  Sempadan-kiri: 0.667em pepejal;
  Border-Top: 1.333EM Telus pepejal;

  /* Letakkan elemen di sebelah kanan elemen jalur dan tolaknya di luar*/
  Kedudukan: Mutlak;
  Atas: 0;
  Kanan: 0;
  Bawah: 0;
  -WebKit-transform: TranslateX (0.667EM);
  Transform: TranslateX (0.667EM);
}

Oleh kerana segitiga yang betul sepadan dengan warna latar belakang jalur, ingatlah untuk menambah warna sempadan yang betul ke unsur-unsur pseudo setiap jalur.

 /* Anak panah kanan elemen pertama*/
.ribbon-alpha .ribbon__element: nth-child (1): selepas {
  Border-Kiri-Kolor: #11D295;
}

/* Anak panah kanan elemen kedua*/
.ribbon-alpha .ribbon__element: nth-child (2): selepas {
  Border-Left-Color: #EF3675;
}

/* Anak panah kanan elemen ketiga*/
.ribbon-alpha .ribbon__element: nth-child (3): selepas {
  Border-Left-Color: #4CD4E9;
}

Itu sahaja!

Kaedah 2: Kaedah Imej Latar Belakang

Kami juga boleh membuat segitiga menggunakan imej latar belakang. Ini memerlukan membuat imej yang sepadan dengan reka bentuk, yang agak rumit, tetapi masih sepenuhnya mungkin. Kami akan menggunakan SVG di sini kerana ia akan menjadi lancar pada sebarang resolusi.

Tidak seperti kaedah segitiga sempadan, kami ingin memadankan ketinggian elemen pseudo ke ketinggian elemen jalur (atau 100%). Lebar komponen sepadan dengan lebar sempadan kiri segitiga sempadan, yang dalam kes kita ialah 0.666666em. Kemudian kita harus menggunakan segitiga putih sebagai imej latar belakang di segitiga kiri dan kemudian imej segitiga warna di segitiga kanan. Sekali lagi, kami menggunakan kedudukan mutlak untuk meletakkan segitiga di bahagian yang betul dari elemen jalur.

 /* Anak panah kiri*/
.ribbon-beta .ribbon__element: sebelum {
  /* Tentukan saiz anak panah*/
  Kandungan: '';
  Ketinggian: 100%;
  lebar: 0.666666em;

  /* Tentukan imej latar belakang yang sesuai dengan warna latar*/
  Latar Belakang-Image: URL (data: imej/svg xml; base64, phn2zybozwlnahq9ijqwiib2awv3qm94psiwidagmtagndaiihdpzhropsixmcigeg1sbnm9imh0dha6ly93d3cudzmub3JNBN jZmZmIj48cGF0aCBkPSJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cmml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
  Latar Belakang-Latar: Pusat Kiri;
  Latar Belakang berulang: tidak berulang;
  Latar Belakang: 100%;

  /* Letakkan elemen di sebelah kiri elemen jalur*/
  Kedudukan: Mutlak;
  Bawah: 0;
  Atas: 0;
  Kiri: 0;
}

/* Anak panah kanan*/
.ribbon-beta .ribbon__element: selepas {
  /* Tentukan saiz anak panah*/
  Kandungan: '';
  Ketinggian: 100%;
  lebar: 0.667em;

  /* Tentukan sifat imej latar belakang*/
  Latar Belakang-Latar: Pusat Kiri;
  Latar Belakang berulang: tidak berulang;
  Latar Belakang: 100%;

  /* Letakkan elemen di sebelah kanan elemen jalur dan tolaknya di luar*/
  Kedudukan: Mutlak;
  Atas: 0;
  Kanan: 0;
  Bawah: 0;
  -WebKit-transform: TranslateX (0.667EM);
  Transform: TranslateX (0.667EM);
}

/* Tentukan imej latar belakang yang sesuai dengan warna latar belakang elemen pertama*/
.ribbon-beta .ribbon__element: nth-child (1): selepas {
  Latar Belakang-imej: URL (Data: Imej/SVG xml; base64, phn2zybozwlnahq9ijqwiib2awv3qm94psiwidagmtagndaiihdpzhropsmcigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znj4c3z Sjtnsaxnsaymcaxmggtndb6iibmawxspiJmtfkmjkmjk1iibmawxslxj1bgu9imv2zw5vzgqiihryyw5zzm9ybb.
}

/* Tentukan imej latar belakang yang sesuai dengan warna latar belakang elemen kedua*/
.ribbon-beta .ribbon__element: nth-child (2): selepas {
  Latar Belakang-imej: URL (Data: Imej/SVG xml; base64, phn2zybozwlnahq9ijqwiib2awv3qm94psiwidagmtagndaiihdpzhropsmcigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znj4c3z SjtnsaxnsaymcaxmggTndB6iibmawxspiJzwyznjc1iibmawxslxj1bgu9imv2zw5vzzgqiihryyw5zzm9ybbwf0cml4kdaglteGltegaGltegaGltegaGlTaGlTaGlTaGlTaGlTaGL
}

/* Tentukan imej latar belakang yang sesuai dengan warna latar belakang elemen ketiga*/
.ribbon-beta .ribbon__element: nth-child (3): selepas {
  Latar Belakang-imej: URL (Data: Imej/SVG xml; base64, phn2zybozwlnahq9ijqwiib2awv3qm94psiwidagmtagndaiihdpzhropsmcigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znj4c3z Sjtnsaxnsaymcaxmggtndb6iibmawxspijngnkngu5iibmawxslxj1bgu9imv2zw5vzgqiihryyw5zzm9ybt0ibwf0cmml4kdagltegegltegltegltegltegltegilzcilz.
}

Itu sahaja!

Selebihnya adalah sama dengan teks asal, kecuali bahawa pernyataan diselaraskan dan diganti, meninggalkan teks asal tidak berubah. Oleh kerana batasan ruang, saya tidak akan mengulanginya di sini. Sila rujuk teks asal untuk terus mengkaji bahagian yang tinggal.

Atas ialah kandungan terperinci Oh, banyak cara untuk membuat reben breadcrumb segitiga!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!