Bagaimana saya bisa membuat perbatasan berbentuk tidak teratur ini dengan CSS murni (tanpa gambar)?

12

Saya mencoba untuk menghindari menggunakan gambar latar belakang (atau solusi berbasis gambar apa pun) untuk secara efektif membuat ini:

perbatasan tidak teratur

Catatan: panah merah hanya menunjuk ke perbatasan yang dimaksud. Panah tidak harus dimasukkan dalam jawaban Anda.

Bagaimana saya bisa membuat perbatasan berbentuk tidak teratur ini dengan CSS murni (tanpa gambar)? Jika gambar tidak dapat dihindari, jawaban yang paling ringkas dan mudah dibaca akan terangkat dan diterima.

css borders Micah Bolen
sumber

Jawaban:

12

Anda dapat menggunakan CSS (perlu diingat ini tidak akan bekerja dengan versi IE yang lebih lama)

Misalnya, Anda bisa menggabungkan beberapa bentuk seperti persegi panjang dan dua segitiga. Lihat jsfiddle ini .

masukkan deskripsi gambar di sini

HTML:

<div id="square"></div>
<div class="align">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
</div>

Dan CSS:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-left: 100px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}

.align div {
    float: left;
}

Anda dapat melihat berbagai bentuk CSS di sini . Kebanyakan jika tidak semua membutuhkan lebih dari satu div, jadi tantangannya adalah menerapkan perbatasan yang lebih gelap.

Yisela
sumber
Apakah ada cara untuk melakukan ini di mana poligon menggunakan lebar berbasis persentase?
Micah Bolen
Menggunakan pendekatan Yisela, Anda dapat membuat segitiga dengan satu div (batas-kiri & perbatasan-kanan dengan 1/2 lebar kuadrat; batas atas = tinggi yang diinginkan; dan tambahkan margin-atas (-1 * batas-atas) Anda perlu menambahkan nilai padding ke kotak untuk mencegah teks menyentuh segitiga.
horatio
2
Anda bisa meletakkan bentuk-bentuk tambahan ini ke dalam elemen semu :beforedan :aftermenjaga html'bersih' Anda. Itu :beforeakan menjadi segitiga kiri, :afteryang kanan.
Vincent
7

Jawaban Yisela solid, tapi saya pikir saya akan menawarkan alternatif ini: menggunakan poligon atau gambar URI dengan bentuk CSS dan clip-path. Ini tutorial singkatnya .

Perhatikan bahwa metode ini akan bekerja dengan browser yang bahkan lebih sedikit daripada trik batas segitiga saat ini. Namun, jika Anda ingin menggunakan bentuk yang lebih kompleks atau membungkus teks Anda dengan bentuk ini, ini akan menjadi cara yang tepat.

demo-tangkapan layar

Joey Cordes
sumber
Tampaknya solusi ini bahkan akan berfungsi jika saya memerlukan poligon untuk menggunakan lebar berbasis persentase. Mungkin, melalui vwunit CSS . Apakah itu terdengar mungkin?
Micah Bolen
2

Metode lain untuk ini yang mungkin juga memiliki dukungan terbatas adalah "tertanam SVG di CSS". Saya belum mencoba ini sendiri tetapi idenya adalah Anda memberikan sumber gambar sebagai url dalam deklarasi css untuk objek dan Anda memberikannya url yang lolos dengan benar yang berisi data.

SVG adalah format teks / xml biasa. Contoh poligon (dari w3schools ):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

Contoh SVG inline (tertanam) (disederhanakan) (dari stackoverflow ):

url("data:image/svg+xml;utf8, <svg></svg>");

Perhatikan bahwa data SVG harus "lolos" dengan benar untuk penggunaan sebaris, yang membuatnya sedikit kurang menarik daripada hanya menautkan file SVG.

Ada beberapa diskusi tentang kelayakan metode di utas terkait di atas. Saya pikir menanamkan sesuatu yang sederhana seperti segitiga putih penuh adalah keputusan yang mudah asalkan ada dukungan. Data format SVG yang kompleks harus disimpan sebagai file SVG daripada inline.

File SVG adalah vektor dan dapat diskalakan berdasarkan persentase, tidak seperti metode "batas". Mereka juga (saat ini) memiliki dukungan yang lebih baik (setidaknya non-inline) daripada metode jalur kliping yang tercantum. SVG, menjadi teks biasa, bahkan dapat dipancarkan secara langsung menggunakan misalnya PHP atau skrip sisi server lainnya.

horatio
sumber
0

Jika area biru Anda pada gambar adalah png transparan dan area putih transparan, maka Anda perlu menyertakan html ini untuk membuatnya menjatuhkan bayangan:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

Dan gunakan css ini pada gambar:

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

Ini adalah solusi lintas-browser yang sempurna.

bogatyrjov
sumber