javascript - Bagaimana untuk mencapai susun atur yang paling semula jadi?

Question

Seperti yang ditunjukkan di bawah

Answer 1

Anggap setiap empat bulatan sebagai empat bucu segi empat tepat dan garis putus-putus boleh dilaksanakan menggunakan putus-putus gaya sempadan.

Kemudian seluruh halaman disusun secara menegak satu demi satu seperti segi empat tepat ini Dua bucu diletakkan di setiap segi empat tepat, dan ia benar-benar diletakkan di sudut kiri atas dan sudut kanan atas segi empat tepat.

https://codepen.io/straybugs/…

Answer 2

Tiada hubungan progresif mendatar dan menegak semata-mata, ia kelihatan sangat janggal.
Hubungan antara setiap lapisan tidak berkaitan dengan penunjuk tetapi dengan melihat bilangan langkah di bawah.
Dan terdapat dua perihalan proses dengan latar belakang gelap, tetapi saya tidak tahu niatnya
Pengalaman keseluruhan terlalu teruk, terutamanya prosesnya terlalu sempit, yang menjejaskan perhatian pengguna.

Answer 3

imej latar belakang
kanvas
kelas pseudo

Answer 4

Jika lebar tetap, saya mungkin membuang garis ke latar belakang, hahaha

Answer 5

width ||. tinggi: calc mengira lebar garisan secara dinamik ini boleh menggunakan elemen pseudo, ::before ::after, kelas induknya semuanya adalah elemen hos, dan boleh jadi dicapai dengan css.

Answer 6

1 Memotong dengan gambar adalah satu cara.
2. Atau gunakan p tambahan susun atur untuk kedudukan dan jidar: 1px putus #000 untuk gaya. . itu sahaja.
3 Gunakan css pseudo-class untuk melaksanakan.

Answer 7

Jika ia adalah pelayar selepas IE8, gunakan kelas pseudo untuk melaksanakannya

p:after {
    content : "";
    display : block;
    position:absolute;
    background : url(); //把图片换好就行，如果支持css3的话一张图片就行了，可以自行旋转
}

Jika ia serasi dengan pelayar sebelumnya, anda hanya boleh menggunakan p untuk mensimulasikan gelombang Ia bergantung pada keperluan peribadi anda.

Answer 8

Sokong pelajar yang menggunakan kanvas, anda boleh mundur selangkah dan menggunakan gambar untuk memotong gambar.

Answer 9

Mula-mula gunakan ul li float untuk terapung, kemudian tulis kelas.bg{position:relitive}, tulis dua pseudo-class, iaitu garisan mendatar dan garis menegak, dan letakkannya mengikut draf reka bentuk