Bentuk dengan sisi miring (responsif)

93

Saya mencoba membuat bentuk seperti pada gambar di bawah dengan tepi miring hanya pada satu sisi (misalnya, sisi bawah) sedangkan tepi lainnya tetap lurus.

Div CSS dengan sisi miring

Saya mencoba menggunakan metode perbatasan (kode diberikan di bawah) tetapi dimensi bentuk saya dinamis dan karenanya saya tidak dapat menggunakan metode ini.

.shape {
    position: relative;
    height: 100px;
    width: 200px;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    height: 0px;
    width: 0px;
    left: 0px;
    bottom: -100px;
    border-width: 50px 100px;
    border-style: solid;
    border-color: tomato tomato transparent transparent;
}
<div class="shape">
    Some content
</div>


Saya juga mencoba menggunakan gradien untuk latar belakang (seperti pada kode di bawah ini) tetapi menjadi kacau saat dimensinya berubah. Anda dapat melihat apa yang saya maksud dengan mengarahkan kursor pada bentuk di cuplikan di bawah ini.

Bagaimana cara membuat bentuk ini dengan sisi miring dan juga dapat mendukung ukuran dinamis ?

Harry
sumber

Jawaban:

128

Ada banyak cara untuk membuat bentuk dengan tepi miring hanya di satu sisi.

Metode berikut tidak dapat mendukung ukuran dinamis seperti yang telah disebutkan dalam pertanyaan:

  • Metode segitiga batas dengan nilai piksel untuk border-width.
  • Gradien linier dengan sintaks sudut (seperti 45deg, 30deg dll).

Metode yang dapat mendukung ukuran dinamis dijelaskan di bawah ini.


Metode 1 - SVG

( Kompatibilitas Browser )

SVG dapat digunakan untuk menghasilkan bentuk baik dengan menggunakan polygons atau paths. Cuplikan di bawah ini memanfaatkan polygon. Konten teks apa pun yang diperlukan dapat ditempatkan di atas bentuk.

Pro

  • SVG dirancang untuk menghasilkan grafik yang dapat diskalakan dan dapat bekerja dengan baik dengan semua perubahan dimensi.
  • Perbatasan dan efek hover dapat dicapai dengan overhead coding yang minimal.
  • Gambar atau latar belakang gradien juga dapat diberikan ke bentuk.

Kontra

  • Dukungan browser mungkin satu-satunya kelemahan karena IE8- tidak mendukung SVG tetapi itu dapat dikurangi dengan menggunakan pustaka seperti Raphael dan juga VML. Selain itu, dukungan browser sama sekali tidak lebih buruk daripada opsi lainnya.

Metode 2 - Latar Belakang Gradien

( Kompatibilitas Browser )

Gradien linier masih dapat digunakan untuk menghasilkan bentuk tetapi tidak dengan sudut seperti yang disebutkan dalam pertanyaan. Kita harus menggunakan to [side] [side]sintaks (terima kasih kepada vals ) daripada menentukan sudut. Ketika sisi ditentukan, sudut gradien secara otomatis disesuaikan berdasarkan dimensi wadah.

Pro

  • Bentuk dapat dicapai dan dipertahankan meskipun dimensi wadahnya dinamis.
  • Efek hover dapat ditambahkan dengan mengubah warna gradien.

Kontra

  • Efek arahkan kursor akan dipicu meskipun kursor berada di luar bentuk tetapi di dalam penampung.
  • Menambahkan batas akan membutuhkan manipulasi gradien yang rumit.
  • Gradien dikenal untuk menghasilkan sudut bergerigi ketika lebar (atau tinggi) sangat besar.
  • Latar belakang gambar tidak dapat digunakan pada bentuk.

Metode 3 - Transformasi Kemiringan

( Kompatibilitas Browser )

Dalam metode ini, elemen semu ditambahkan, dimiringkan dan diposisikan sedemikian rupa sehingga terlihat seperti salah satu tepi miring / bersudut.Jika tepi atas atau bawah miring, kemiringan harus sepanjang sumbu Y, jika tidak rotasi harus sepanjang sumbu X. Sisi transform-originharus berseberangan dengan sisi miring.

Pro

  • Bentuk dapat dicapai bahkan dengan batas.
  • Efek hover akan dibatasi di dalam bentuk.

Kontra

  • Dimensi perlu ditingkatkan secara proporsional agar bentuk dipertahankan karena ketika sebuah elemen miring, offsetnya dalam sumbu Y meningkat seiring widthbertambahnya dan sebaliknya (coba tingkatkan widthke 200pxdalam cuplikan). Anda dapat menemukan informasi lebih lanjut tentang ini di sini .

Metode 4 - Transformasi Perspektif

( Kompatibilitas Browser )

Dalam metode ini, wadah utama diputar sepanjang sumbu X atau Y dengan sedikit perspektif. Menetapkan nilai yang sesuai transform-originakan menghasilkan tepi miring hanya pada satu sisi.

Jika sisi atas atau bawah miring, rotasi harus sepanjang sumbu Y, jika tidak, rotasi harus sepanjang sumbu X. Sisi transform-originharus berseberangan dengan sisi miring.

Pro

  • Bentuk bisa dicapai dengan batas.
  • Dimensi tidak perlu bertambah secara proporsional agar bentuknya dipertahankan.

Kontra

  • Konten juga akan diputar dan karenanya harus diputar balik agar terlihat normal.
  • Memosisikan teks akan membosankan jika dimensinya tidak statis.

Metode 5 - Jalur Klip CSS

( Kompatibilitas Browser )

Dalam metode ini, wadah utama dipotong menjadi bentuk yang dibutuhkan menggunakan poligon. Titik poligon harus dimodifikasi tergantung pada sisi di mana tepi miring diperlukan.

Pro

  • Bentuk dapat dipertahankan bahkan saat wadah diubah ukurannya secara dinamis.
  • Efek hover akan dibatasi dengan sempurna di dalam batas bentuk.
  • Gambar juga bisa digunakan sebagai background untuk bentuk tersebut.

Kontra

  • Dukungan browser sangat buruk saat ini.
  • Perbatasan dapat ditambahkan dengan menempatkan elemen yang benar-benar diposisikan di atas bentuk dan memberinya klip yang diperlukan tetapi di luar titik itu tidak pas saat mengubah ukuran secara dinamis.

Metode 6 - Kanvas

( Kompatibilitas Browser )

Kanvas juga dapat digunakan untuk menghasilkan bentuk dengan menggambar jalur. Potongan di bawah ini memiliki demo. Konten teks apa pun yang diperlukan dapat ditempatkan di atas bentuk.

Pro

  • Bentuk dapat dicapai dan dipertahankan meskipun dimensi wadahnya dinamis. Perbatasan juga bisa ditambahkan.
  • Efek hover dapat dibatasi dalam batas-batas bentuk dengan menggunakan pointInpathmetode.
  • Gambar atau latar belakang gradien juga dapat diberikan ke bentuk.
  • Pilihan yang lebih baik jika efek animasi real-time diperlukan karena tidak memerlukan manipulasi DOM.

Kontra

  • Kanvas berbasis raster dan karenanya tepi yang bersudut akan menjadi piksel atau kabur saat diskalakan melebihi titik * .

* - Menghindari pikselasi akan membutuhkan pengecatan ulang bentuk setiap kali viewport diubah ukurannya. Ada contohnya di sini tetapi itu adalah overhead.

Harry
sumber
36

Saya mencoba menggunakan metode perbatasan tetapi dimensi bentuk saya dinamis dan karenanya saya tidak dapat menggunakan metode ini.


Metode 7 - Unit Area Pandang (Border Redux )

( Kompatibilitas Browser )

Viewport Units adalah inovasi hebat dalam CSS3. Meskipun biasanya Anda dapat menggunakan nilai persentase untuk mendinamisasi properti Anda, Anda tidak dapat melakukannya untuk border-widths ( atau untuk font-sizes ).

Dengan Viewport Units, Anda dapat secara dinamis mengatur lebar perbatasan Anda , bersama dengan ukuran objek Anda, dibandingkan dengan dimensi viewport.

Catatan: nilai persentase merujuk ke objek induk, bukan ke viewport (area yang terlihat di jendela).

Untuk menguji metode ini, luncurkan cuplikan Halaman Penuh berikut dan ubah ukurannya baik secara horizontal maupun vertikal.

.shape {
    position: relative;
    height: 20vh;
    width: 40vw;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    left: 0px;
    right: 0px;
    top: 20vh;
    border-width: 10vh 20vw;
    border-style: solid;
    border-color: tomato tomato rgba(0,0,0,0) rgba(0,0,0,0);
}
<div class="shape">Some content</div>

Kelebihan - (1) Semuanya dinamis, jangkauan browser luas.

Kontra - (1) Anda harus memperhatikan bagaimana OS Anda menangani scrollbar dengan overflow: auto;.

Andrea Ligios
sumber
3
Tampaknya bergerigi di versi chrome terbaru.
Mr_Green
Benar! Saya kira mesin browser masih membutuhkan waktu untuk membuat ini lancar. Firefox juga memiliki masalah ini saat menggunakan teknik ini dengan piksel daripada unit viewport, tetapi dapat diperbaiki dengan menggunakan rgba (,,, 0) dan bukan transparan. Untungnya kami memiliki pilihan lain sekarang;)
Andrea Ligios
1

Solusi saya terinspirasi oleh metode yang disebut Metode 7 - Unit Area Pandang oleh Andrea Ligios, di atas di halaman ini.

Saya menggunakan unit "horizontal" untuk tinggi juga ( height:10vw) untuk menjaga proporsi yang diberikan di trapesium saat mengubah ukuran lebar jendela navigasi. Kita bisa menyebutnya Metode 7b - Lebar Area Pandang .

Lebih lanjut, menurut pendapat saya, menggunakan dua bersarang div, bukan satu dan :afterselektor, memungkinkan penyetelan yang lebih baik untuk gaya konten teks (misalnya text-align, dll.).

.dtrapz {
  position: relative;
  margin: 10px 40vw;
  width: 0;
  height: 10vw;
  border: none;
  border-right: 20vw solid #f22;
  border-bottom: 5vw solid transparent;
}

.dtcont {
  position: absolute;
  width: 20vw;
  height: 10vw;
  text-align: center;
  color: #fff;/* just aesthetic */
}
<div class="dtrapz">
  <div class="dtcont">Some content</div>
</div>

MattAllegro
sumber
@ Downvoter Hai! Beri tahu saya apa yang salah dengan jawaban saya, jadi saya bisa mengedit atau menghapusnya jika masuk akal! Saya bukan spesialis tetapi menurut saya ini dapat diterapkan di banyak halaman, bekerja dengan konten teks yang lebih panjang, hanya bergantung pada lebarnya :)
MattAllegro