Bagaimana untuk Mencipta Segi Tiga Berasaskan Peratusan Responsif dalam CSS?

CSS: Menjana Segi Tiga Berasaskan Peratusan Responsif

Cabaran timbul daripada mencipta anak panah di bawah elemen hiperpautan menggunakan CSS, tetapi menentukan lebar sempadan dalam piksel memberikan batasan dalam responsif. Artikel ini menunjukkan penyelesaian yang menggunakan unsur pseudo yang condong dan diputar untuk mencapai segi tiga dengan saiz berasaskan peratusan.

Pelaksanaan Segi Tiga Responsif

.btn {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50%;
  text-align: center;
  color: white;
  background: gray;
  line-height: 50px;
  text-decoration: none;
  padding-bottom: 15%;
  background-clip: content-box;
  overflow: hidden;
}

.btn:after {
  content: "";
  position: absolute;
  top: 50px;
  left: 0;
  background-color: inherit;
  padding-bottom: 50%;
  width: 57.7%;
  z-index: -1;
  transform-origin: 0 0;
  transform: rotate(-30deg) skewX(30deg);
}

Dalam kelas ".btn", kami mengalih keluar lebar tetap, membenarkan saiz segi tiga menyesuaikan diri dengan kandungan lebar. Elemen pseudo ".btn:after" diposisikan secara mutlak, condongX dan diputar untuk mencipta bentuk segi tiga dan warna latar belakangnya sepadan dengan latar belakang butang.

Dengan menggunakan padding-bottom, kami mengekalkan nisbah aspek segi tiga . Pendekatan ini memastikan bahawa segi tiga kekal responsif, mengubah saiz secara berkadaran dengan kandungan teks dan URL dalam hiperpautan.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Segi Tiga Berasaskan Peratusan Responsif dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!