Div con border-image per border top

**a94** · 16-05-2020, 18:18

Buonasera, ho necessità di creare un div con uno "shape" come border-top, nello specifico ho sin'ora provato con quanto segue, utilizzando sia svg che png ma senza alcun risultato.

codice:

#homefilter {	border-image: url(/images/svg/treeprova.png) 30% repeat;
	border-bottom: 0;
	border-right: 0;
	border-left: 0;
}

Al seguente url (non sono riuscito ad allegare alcun file, nonostante fosse in estensione supportata -png- e al di sotto della soglia di 620px) troverete un mockup di ciò che voglio realizzare:
https://imgur.com/a/PA1rLGR

Grazie per il supporto!

**ninja72** · 16-05-2020, 18:44

questo è un piccolo esempio ma si può realizzare in altri modi.

codice:

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
* {
border: 0;
margin: 0;
padding: 0;

        }

#contenitore {
background-image: url('forest.jpg');
background-size: cover;
width: 100%;
height: 100vh
        }

#footer {
background-image: url('tree.png');
position: absolute;
bottom: 0;
width: 100%;
height: 60px
        }
</style>
</head>

<body>
<divid="contenitore">
</div>

<divid="footer">
</div>
</body>

</html>

**KillerWorm** · 17-05-2020, 01:47

[mod]
@ninja72 ciao, ti chiedo se puoi cortesemente ripostare il codice in maniera "pulita". Vedi mio PVT. Grazie

**ninja72** · 17-05-2020, 08:40

Ciao KillerWorm, scusate non sapevo di questo piccolo inconveniente / bug. Grazie per la dritta.

codice HTML:

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
* {
border: 0;
margin: 0;
padding: 0;

        }

#contenitore {
background-image: url('forest.jpg');
background-size: cover;
width: 100%;
height: 100vh
        }

#footer {
background-image: url('tree.png');
position: absolute;
bottom: 0;
width: 100%;
height: 60px
        }
</style>
</head>

<body>
<divid="contenitore">
</div>

<divid="footer">
</div>
</body>

</html>

**a94** · 17-05-2020, 14:17

Ciao, grazie per la risposta! Mi chiedevo: questa soluzione comporta però una creazione di un svg "a schermo intero" come larghezza vero? La soluzione con border image (che però appunto non sono riuscito a far funzionare) era interessante per la possibilità del repeat, avrei quindi creato una specie di seamless pattern che potesse venir ripetuto senza problemi.
Inoltre, la hero image è parte di un'altra sezione (sto provando ad utilizzare sppb e mi ci sto trovando bene), ed inoltre l'ho pensata per essere 80vh. Mi servirebbe una soluzione "stand-alone" per il div con la foresta sopra

**ninja72** · 17-05-2020, 15:54

Ciao, in riferimento al tuo mockup penso che la mia sia la soluzione più sensata anchè se si potrebbe fare in altri modi. Ma "border-image" nasce per tutt'altro scopo, ovvero quello di creare un bordo su tutta la forma di un contenitore che puo' essere un div per esempio.Il discorso svg è relativo, per il footer basta un png trasparente di dimensioni didotte (es. 50x50pixel).

**a94** · 17-05-2020, 16:07

Ciao, grazie ancora per la risposta.
Il mio dubbio è: non avendo impostato un background repeat, se io utilizzassi un png mettiamo 50x50 come da te suggerito, questo verrebbe comunque ripetuto o "stretchato"?
Non mi è molto chiara l'applicazione che hai suggerito :/ lol

**ninja72** · 17-05-2020, 16:57

Figurati, in questo caso verrebbe ripetuto, ma potresti gestire la ripetizione con "background-repeat: none" e il size con "background-size: 100% 100%" o configurarlo a seconda delle tue esigenze.

Discussione: Div con border-image per border top

Strumenti discussione

Ricerca discussione

Visualizza

Div con border-image per border top

Tag per questa discussione

Permessi di invio