Mengapa Penunjuk Segi Tiga Berpusat Mendatar Saya Beralih Semasa Mengubah Saiz?

Pemusatan Mendatar Penunjuk Segitiga Menghadapi Isu Semasa Saiz Semula Skrin

Pernyataan Masalah

Pengguna berhasrat untuk mendatar memusatkan segitiga penunjuk dalam elemen bekas. Walaupun berjaya dalam saiz tetingkap tertentu, penuding beralih daripada penjajaran apabila saiz tetingkap diubah.

Penyelesaian

Memahami Isu:

Percubaan awal untuk memusatkan penunjuk dengan kiri: 48% meletakkan penunjuk berdasarkan kirinya tepi. Pendekatan ini tidak mengambil kira lebar elemen, mengakibatkan salah penjajaran apabila saiz tetingkap berubah.

Menggunakan transformasi untuk Mencapai Pemusatan:

Untuk memusatkan segitiga dengan betul, ia adalah disyorkan untuk menggunakan sifat transformasi:

.triangle {
   position: absolute;
   left: 50%;
   transform: translate(-50%,0);
}

Peraturan ini mengalihkan kedudukan segi tiga sebanyak 50% daripadanya lebar, memusatkannya dengan berkesan dalam bekas.

Menggabungkan penjelmaan dengan Putaran:

Dalam senario khusus ini, elemen segi tiga juga mempunyai penjelmaan: putar(45deg) digunakan . Walau bagaimanapun, peraturan lata CSS mengatasi perubahan pertama dengan yang kedua, menghalang pemusatan mendatar.

Untuk menangani perkara ini, rantaikan fungsi transformasi:

.container::before {
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
}

Fungsi transformasi berbilang boleh digunakan bersama, memohon mengikut susunan yang disenaraikan. Dalam kes ini, terjemah digunakan dahulu, diikuti dengan putaran.

Complete Kod Coretan:

body {
    background: #333333;
}

.container {
    width: 98%;
    height: 80px;
    line-height: 80px;
    position: relative;
    top: 20px;
    min-width: 250px;
    margin-top: 50px;
}

.container-decor {
    border: 4px solid #C2E1F5;
    color: #fff;
    font-family: times;
    font-size: 1.1em;
    background: #88B7D5;
    text-align: justify;
}

.container::before {
    top: -33px;
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
    position: absolute;
    border: solid #C2E1F5;
    border-width: 4px 0 0 4px;
    background: #88B7D5;
    content: '';
    width: 56px;
    height: 56px;
}

<div class="container container-decor">great distance</div>

Atas ialah kandungan terperinci Mengapa Penunjuk Segi Tiga Berpusat Mendatar Saya Beralih Semasa Mengubah Saiz?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!