Esagoni

[Ciombe]

Salve, avrei bisogno di creare 3 box come immagine allegata, ovvero 3 esagoni.

sul web ho trovato questo codice

<style>
.esagono {
    width: 100px;
    height: 55px;
    background: black;
    position: relative;
}
.esagono:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid black;
}
.esagono:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid black;
}
</style>

<div class="esagono"></div>

ma il fatto è che all'interno dell'esagono devo metterci un immagine o altri elementi per cui questo sistema non soddisfa le mie esigenze, qualcuno sa come devo muovermi?

[KillerWorm]

Ciao, non vedo nessuna immagine allegata

Chiaramente questo tipo di forme, realizzate con degli accrocchi css, lasciano un po' il tempo che trovano. Se devi realizzare qualcosa di più complesso bisogna capire come e se usarle, o se invece usare qualcos'altro.

Intanto prova a ripostare l'immagine così vediamo come ti si può aiutare


PS: quando posti del codice sul forum è opportuno utilizzare gli appositi tag di formattazione [code] (vedi regolamento di sezione). Grazie.

[Ciombe]

avevo dimenticato l'allegato
Cmq ho trovato qui https://codepen.io/web-tiki/pen/HhCyd qualcosa che faceva più al caso mio!

[VinzClortho]

Cmq ho trovato qui https://codepen.io/web-tiki/pen/HhCyd qualcosa che faceva più al caso mio!

Cavolo, "accrocchio css" è dire poco °__° ...
Comunque secondo me sarebbe il momento di introdurre qualche nuova proprietà css per la gestione di forme geometriche.