Sovrapporre mezza immagine ad un div (o altro elemento).

Darkan85

Nuovo Utente
28 Giu 2012
18
0
0
Salve a tutti.
Vi espongo subito il mio problema.
Ho un'immagine a forma di triangolo con la punta in giù.
E ho un bandone centrale che attraversa tutta la pagina.
Questo triangolo parte fuori dal bandone centrale. Ma la sua punta inferiore arriva sul bandone in questione.

Come fare?
Le sto provando tutte ma non mi viene (sempre che sia possibile).

Cattura.JPG
 

Fez Vrasta

Utente Attivo
11 Mag 2013
409
0
0
Se ci dessi del codice su cui lavorare potremmo capirci qualcosa.
Senza codice ti posso consigliare di usare l'attributo CSS margin e vedere di spostare l'elemento usando margini negativi o positivi uni-direzionalmente.
 

Darkan85

Nuovo Utente
28 Giu 2012
18
0
0
Ma se uso i margini, ottengo solo di spostarlo giusto? Io invece voglio che sia metà sopra al verde.
 

Darkan85

Nuovo Utente
28 Giu 2012
18
0
0
Ho un codice davvero pieno di css. Vi può essere utile lo stesso?
E' per questo che per ora non l'ho postato!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
prova con la proprieta z-index
al contenitore verde gli assegni un numero piu basso
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Codice:
            img {
                z-index: 10;
            }
            div.bandoneverde {
                z-index: 9;
            }
hai fatto cosi?
posta un po di codice
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Una soluzione più semplice sarebbe creare un div largo come la parte verde e alto come la parte verde che va allineata in basso più la parte trasparente che va posizionata in alto, gli dai come sfondo del div la suddetta immagine e dentro il div ci metti il triangolo con il codice <img />.

Codice:
div#nome {width: 100%; height: 100px; background: url('immagineverde.png')repeat-x bottom;}
HTML:
<div id="nome">
     <img src="immaginetriangolo.png" alt="triangolo"/>
</div>