Come posso creare questo bordo di forma irregolare con CSS puro (senza immagini)?

12

Sto cercando di evitare di utilizzare un'immagine di sfondo (o qualsiasi soluzione basata su immagini) per creare efficacemente questo:

bordo irregolare

Nota: la freccia rossa indica solo il bordo in questione. La freccia non dovrebbe essere inclusa nella tua risposta.

Come posso creare questo bordo di forma irregolare con CSS puro (senza immagini)? Se le immagini sono inevitabili, la risposta più concisa e leggibile verrà valutata e accettata.

css borders

— Micah Bolen
fonte

12

È possibile utilizzare CSS (tenere presente che non funzionerà con le versioni precedenti di IE).

Ad esempio, potresti combinare alcune forme come un rettangolo e due triangoli. Vedi questo jsfiddle .

inserisci qui la descrizione dell'immagine

HTML:

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

E il 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;
}

Puoi vedere una varietà di forme CSS qui . La maggior parte, se non tutte, richiedono più di un div, quindi la sfida sarebbe applicare un bordo più scuro.

— Yisela
fonte

C'è un modo per farlo in cui il poligono utilizza una larghezza basata su percentuale?

— Micah Bolen,

Usando l'approccio di Yisela, puoi creare il triangolo con un div (bordo-sinistra e bordo-destra con 1/2 della larghezza del quadrato; il bordo superiore = altezza desiderata; e aggiungere un margine superiore di (-1 * bordo superiore) Dovresti aggiungere il valore di riempimento al quadrato per evitare che il testo

— lambisca

2

Potresti mettere queste forme aggiuntive in pseudo-elementi :beforee :aftermantenere il tuo html'pulito'. Il :beforesarebbe il triangolo a sinistra, la :afterdestra uno.

— Vincent,

7

La risposta di Yisela è solida, ma ho pensato di offrire questa alternativa: usare il poligono o un URI di immagine con forme CSS e tracciato di clip. Ecco un breve tutorial .

Nota che questo metodo funzionerà con un numero di browser ancora inferiore rispetto al trucco del bordo del triangolo al momento. Tuttavia, se si desidera utilizzare una forma più complessa o avvolgere il testo nella forma, questa sarà la strada da percorrere.

demo-screenshot

— Joey Cordes
fonte

Sembra che questa soluzione funzionerebbe anche se avessi bisogno del poligono per utilizzare una larghezza basata su percentuale. Forse, tramite l' vwunità CSS . Sembra possibile?

— Micah Bolen,

2

Un altro metodo per questo che può anche avere un supporto limitato è "SVG incorporato in CSS". Non ho provato questo da solo, ma l'idea è che tu fornisca una risorsa immagine come url all'interno della dichiarazione css per l'oggetto e gli passi un URL correttamente sfuggito che contiene i dati.

SVG è un formato di testo semplice / xml. Un poligono di esempio (da 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>

Un esempio in linea (incorporato) SVG (semplificato) (da stackoverflow ):

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

Si noti che i dati SVG devono essere "salvati" correttamente per l'uso in linea, il che li rende leggermente meno attraenti rispetto al semplice collegamento di un file SVG.

C'è qualche discussione sulla fattibilità del metodo nel thread collegato sopra. Penso che incorporare qualcosa di semplice come un triangolo pieno di bianco sia una decisione facile a condizione che ci sia supporto. I dati complessi in formato SVG devono essere archiviati come file SVG anziché in linea.

I file SVG sono vettoriali e possono essere ridimensionati in percentuale, a differenza del metodo "bordi". Inoltre (attualmente) hanno un supporto migliore (almeno non in linea) rispetto al metodo del tracciato di ritaglio elencato. SVG, essendo testo semplice, può anche essere emesso al volo usando ad esempio PHP o altri script lato server.

— Horatio
fonte

0

Se la tua area blu sull'immagine è un png trasparente e l'area bianca è trasparente, allora devi includere questo codice HTML per far cadere le ombre:

<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>

E usa questo css sull'immagine:

.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')";
}

Questa è una soluzione perfettamente cross-browser.

— bogatyrjov
fonte