Forma con un lato inclinato (reattivo)


90

Sto cercando di creare una forma come nell'immagine qui sotto con un bordo inclinato su un solo lato (ad esempio, il lato inferiore) mentre gli altri bordi rimangono diritti.

Div CSS con un lato inclinato

Ho provato a utilizzare il metodo del bordo (il codice è fornito di seguito) ma le dimensioni della mia forma sono dinamiche e quindi non posso utilizzare questo metodo.

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


Ho anche provato a usare le sfumature per lo sfondo (come nel codice sotto) ma si incasina quando le dimensioni cambiano. Puoi vedere cosa intendo passando con il mouse sulla forma nello snippet sottostante.

Come posso creare questa forma con un lato inclinato e anche essere in grado di supportare dimensioni dinamiche ?

Risposte:


126

Esistono molti modi per creare la forma con un bordo inclinato solo su un lato.

I seguenti metodi non possono supportare le dimensioni dinamiche come già menzionato nella domanda:

  • Metodo del triangolo del bordo con valori in pixel per border-width.
  • Gradienti lineari con la sintassi degli angoli (come 45deg, 30deg ecc.).

I metodi che possono supportare le dimensioni dinamiche sono descritti di seguito.


Metodo 1 - SVG

( Compatibilità browser )

SVG può essere utilizzato per produrre la forma utilizzando polygons o paths. Lo snippet di seguito utilizza polygon. Qualsiasi contenuto di testo richiesto può essere posizionato sopra la forma.

Professionisti

  • SVG è progettato per produrre grafica scalabile e può funzionare bene con tutte le modifiche alle dimensioni.
  • I bordi e l'effetto hover possono essere ottenuti con un overhead minimo di codifica.
  • È inoltre possibile fornire alla forma un'immagine o uno sfondo sfumato.

Contro

  • Il supporto del browser è probabilmente l'unico svantaggio perché IE8- non supporta SVG ma ciò può essere mitigato utilizzando librerie come Raphael e anche VML. Inoltre, il supporto del browser non è in alcun modo peggiore delle altre opzioni.

Metodo 2 - Sfondo sfumato

( Compatibilità browser )

I gradienti lineari possono ancora essere usati per produrre la forma ma non con gli angoli come menzionato nella domanda. Dobbiamo usare la to [side] [side]sintassi (grazie a vals ) invece di specificare gli angoli. Quando vengono specificati i lati, gli angoli del gradiente vengono regolati automaticamente in base alle dimensioni del contenitore.

Professionisti

  • La forma può essere ottenuta e mantenuta anche se le dimensioni del contenitore sono dinamiche.
  • L'effetto hover può essere aggiunto cambiando il colore del gradiente.

Contro

  • L'effetto al passaggio del mouse verrà attivato anche quando il cursore si trova all'esterno della forma ma all'interno del contenitore.
  • L'aggiunta di bordi richiederebbe complesse manipolazioni del gradiente.
  • I gradienti sono noti per la produzione di angoli frastagliati quando la larghezza (o l'altezza) è molto grande.
  • Gli sfondi delle immagini non possono essere utilizzati sulla forma.

Metodo 3 - Trasformazioni oblique

( Compatibilità browser )

In questo metodo, uno pseudo-elemento viene aggiunto, inclinato e posizionato in modo tale che sembri che uno dei bordi sia inclinato / inclinato.Se il bordo superiore o inferiore è inclinato, l'inclinazione dovrebbe essere lungo l'asse Y, altrimenti il la rotazione dovrebbe essere lungo l'asse X. Il transform-origindovrebbe avere il lato opposto al lato inclinato.

Professionisti

  • La forma può essere ottenuta anche con i bordi.
  • L'effetto al passaggio del mouse sarà limitato all'interno della forma.

Contro

  • Le dimensioni devono aumentare proporzionalmente affinché la forma venga mantenuta perché quando un elemento è inclinato, il suo offset nell'asse Y aumenta widthall'aumentare e viceversa (prova ad aumentare la widtha 200pxnello snippet). Puoi trovare maggiori informazioni su questo qui .

Metodo 4 - Trasformazioni prospettiche

( Compatibilità browser )

In questo metodo, il contenitore principale viene ruotato lungo l'asse X o Y con un po 'di prospettiva. L'impostazione del valore appropriato su transform-originprodurrebbe un bordo inclinato solo su un lato.

Se il lato superiore o inferiore è inclinato, la rotazione dovrebbe essere lungo l'asse Y, altrimenti la rotazione dovrebbe essere lungo l'asse X. Il transform-origindovrebbe avere il lato opposto al lato inclinato.

Professionisti

  • La forma può essere ottenuta con i bordi.
  • Le dimensioni non devono aumentare proporzionalmente per mantenere la forma.

Contro

  • Anche i contenuti verranno ruotati e quindi devono essere ruotati in senso opposto per sembrare normali.
  • Il posizionamento del testo sarà noioso se le dimensioni non sono statiche.

Metodo 5 - CSS Clip Path

( Compatibilità browser )

In questo metodo, il contenitore principale viene ritagliato nella forma richiesta utilizzando un poligono. I punti del poligono dovrebbero essere modificati a seconda del lato in cui è richiesto il bordo inclinato.

Professionisti

  • La forma può essere mantenuta anche quando il contenitore viene ridimensionato dinamicamente.
  • L'effetto al passaggio del mouse sarà perfettamente limitato all'interno dei bordi della forma.
  • L'immagine può anche essere utilizzata come sfondo per la forma.

Contro

  • Il supporto del browser è attualmente molto scarso.
  • I bordi possono essere aggiunti posizionando un elemento assolutamente posizionato sopra la forma e dandogli la clip necessaria, ma oltre un punto non si adatta bene quando si ridimensiona dinamicamente.

Metodo 6 - Canvas

( Compatibilità browser )

La tela può essere utilizzata anche per produrre la forma disegnando tracciati. Lo snippet di seguito contiene una demo. Qualsiasi contenuto di testo richiesto può essere posizionato sopra la forma.

Professionisti

  • La forma può essere ottenuta e mantenuta anche se le dimensioni del contenitore sono dinamiche. È inoltre possibile aggiungere bordi.
  • L'effetto al passaggio del mouse può essere limitato all'interno dei confini della forma utilizzando il pointInpathmetodo.
  • È inoltre possibile fornire alla forma un'immagine o uno sfondo sfumato.
  • Scelta migliore se sono necessari effetti di animazione in tempo reale in quanto non richiede la manipolazione del DOM.

Contro

  • La tela è basata su raster e quindi i bordi angolati diventeranno pixelati o sfocati se ridimensionati oltre un punto * .

* - Per evitare la pixelizzazione sarebbe necessario ridipingere la forma ogni volta che la finestra viene ridimensionata. C'è un esempio di questo qui, ma questo è un sovraccarico.


35

Ho provato a utilizzare il metodo del bordo ma le dimensioni della mia forma sono dinamiche e quindi non posso utilizzare questo metodo.


Metodo 7 - Viewport Units (Border Redux )

( Compatibilità browser )

Le unità di visualizzazione sono una grande innovazione in CSS3. Anche se di solito puoi utilizzare valori percentuali per dinamizzare le tue proprietà, non puoi farlo per border-widths ( né per font-sizes ).

Con Viewport Units invece puoi impostare dinamicamente le larghezze dei bordi , insieme alle dimensioni dei tuoi oggetti, rispetto alla dimensione del viewport.

Nota: i valori percentuali sono riferiti all'oggetto genitore, non al viewport (area visibile della finestra).

Per testare il metodo, avvia il seguente frammento Pagina intera e ridimensionalo sia orizzontalmente che verticalmente.

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

Pro - (1) Tutto è dinamico, la copertura del browser è ampia.

Contro - (1) Dovresti prestare attenzione a come il tuo sistema operativo gestisce la barra di scorrimento con overflow: auto;.


3
Sembra frastagliato nell'ultima versione di Chrome.
Mr_Green

Vero! Immagino che i motori del browser abbiano ancora bisogno di tempo per renderlo senza problemi. Firefox ha anche questo problema quando si utilizza questa tecnica con i pixel invece delle unità di visualizzazione, ma è risolvibile utilizzando rgba (,,, 0) invece di trasparente. Per fortuna in questo momento abbiamo altre opzioni;)
Andrea Ligios

1

La mia soluzione si ispira a quella chiamata Metodo 7 - Viewport Units di Andrea Ligios, sopra in questa pagina.

Ho usato anche l'unità "orizzontale" per l'altezza ( height:10vw) per mantenere le proporzioni date nel trapezio durante il ridimensionamento della larghezza della finestra di navigazione. Potremmo chiamare questo metodo 7b - Viewport Width .

Inoltre, utilizzando due divs annidati , invece di uno e il:after selettore, consente una migliore regolazione degli stili di contenuto del testo, a mio parere (ad esempio text-align, ecc.).

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


@ Downvoter Ciao! Fammi sapere cosa c'è che non va nella mia risposta, così posso modificarla o cancellarla se ha senso! Non sono uno specialista ma mi sembra che questo potrebbe essere applicato in molte pagine, lavorare con contenuti di testo più lunghi, a seconda solo della larghezza :)
MattAllegro
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.