Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencipta Segi Tiga Berasaskan Peratusan Responsif dalam CSS?

Bagaimana untuk Mencipta Segi Tiga Berasaskan Peratusan Responsif dalam CSS?

Barbara Streisand
Barbara Streisandasal
2024-12-03 08:16:09962semak imbas

How to Create a Responsive Percentage-Based Triangle in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn