Bagaimana untuk Mencipta Segitiga CSS Responsif Menggunakan Peratusan?

Segitiga CSS Responsif dengan Lebar Peratus

Kod CSS di bawah mencipta anak panah betul-betul 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, pendekatan ini memerlukan penentuan lebar pautan untuk mencapai saiz anak panah yang diingini. Untuk mencipta segi tiga responsif yang berskala berdasarkan lebar pautan, gunakan kod berikut:

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

Kod ini menggunakan elemen pseudo yang condong dan diputar untuk mencipta segi tiga yang mengekalkan nisbah bidangnya berdasarkan pautan ketinggian. Jika anda lebih suka saiz segi tiga untuk menyesuaikan diri dengan kandungannya, keluarkan lebar daripada kelas .btn.

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