Bagaimana untuk Mencipta Segitiga CSS Responsif Menggunakan Lebar Peratusan?

Membuat Segitiga CSS Responsif dengan Lebar Peratusan

Kod yang disediakan di bawah menghasilkan anak panah yang diletakkan di bawah elemen:

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}
.btn:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 10px 50px 0 50px;
    border-style: solid;
    border-color: gray transparent transparent transparent;   
}

Walau bagaimanapun, kaedah ini memerlukan penetapan lebar pautan untuk memastikan saiz anak panah yang betul. Untuk menangani had ini, kita boleh menggunakan pendekatan responsif menggunakan elemen pseudo yang condong dan diputar:

.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);
}

Pendekatan ini memastikan bahawa segi tiga mengekalkan nisbah bidangnya dengan sifat padding-bottom. Mengalih keluar sifat lebar pada kelas .btn membolehkan segi tiga menyesuaikan saiznya mengikut kandungannya, menjadikannya responsif sepenuhnya.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Segitiga CSS Responsif Menggunakan Lebar Peratusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!