disegnare coni css

**barnico** · 16-11-2006, 17:11

avrei bisogno di disegnare una freccia è mi serve utilizzare i css, qualcuno sa come fare?

**blekm** · 16-11-2006, 17:15

Originariamente inviato da barnico
avrei bisogno di disegnare una freccia è mi serve utilizzare i css, qualcuno sa come fare?

con i css non puoi "disegnare" .. per fare la freccia usa un programma come Photoshop.

Nel caso in cui io avessi capito male, chiedo venia..

e in questo caso, spiegati meglio ..

**gra-fichetto** · 16-11-2006, 18:55

Se proprio devi...

pagina XHTML:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>Freccia</title>
<style type="text/css">
@import url("stile.css");
</style>
</head>

<body>

<div id="soprauno"></div>
<div id="sopradue"></div>
<div id="sopratre"></div>
<div id="sopraquattro"></div>
<div id="sopracinque"></div>
<div id="corpo"></div>
<div id="sottouno"></div>
<div id="sottodue"></div>
<div id="sottotre"></div>
<div id="sottoquattro"></div>
<div id="sottocinque"></div>

</body>
</html>

nel tuo foglio di stile (stile.css) :

#corpo{
position: absolute;
top: 15px;
left: 15px;
width: 20px;
height: 1px;
border-top: 1px solid #000
}
#soprauno, #sopradue, #sopratre, #sopraquattro, #sopracinque, #sottouno, #sottodue, #sottotre, #sottoquattro, #sottocinque{
position: absolute;
left: 29px;
height: 1px;
border-top: 1px solid #000
}
#soprauno{
top: 14px;
width: 5px
}
#sopradue{
top: 13px;
width: 4px
}
#sopratre{
top: 12px;
width: 3px
}
#sopraquattro{
top: 11px;
width: 2px
}
#sopracinque{
top: 10px;
width: 1px
}

#sottouno{
top: 16px;
width: 5px
}
#sottodue{
top: 17px;
width: 4px
}
#sottotre{
top: 18px;
width: 3px
}
#sottoquattro{
top: 19px;
width: 2px
}
#sottocinque{
top: 20px;
width: 1px
}

Testato su IE6 e FF1.8

**ricman** · 17-11-2006, 09:59

Originariamente inviato da gra-fichetto
Se proprio devi...

Pazzo!!!

**barnico** · 17-11-2006, 10:52

ok, interessante, ma non esiste un metodo più facile che usa un unico div?

**gra-fichetto** · 17-11-2006, 10:55

Si. Un div con un'immagine all'interno. Oppure di sfondo.

**Gunn** · 17-11-2006, 10:55

Originariamente inviato da barnico
ok, interessante, ma non esiste un metodo più facile che usa un unico div?

ma usare un'immagine è troppo complicato?

**barnico** · 17-11-2006, 11:46

si, perchè ogni utente può decidere il colore che vuole, anzi più colori, per diverse frecce,

**barnico** · 20-11-2006, 16:41

gra-fichetto, vorrei utilizzare la tua soluzione, però come faccio a fare in modo che le freccie vengono inserite all'interno di celle di una tabella, come faccio con la proprietà position?
inoltre è possibile associare più classi sotto un unico nome di classe?

**gra-fichetto** · 21-11-2006, 11:18

Non credo ci siano grossi problemi: ti basta inserire tutti i div che "disegnano" la freccia in un div al quale setti il position: relative;

Un esempio:

nella tua pagina

codice:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>Freccia</title>
<style type="text/css">
@import url("stile.css");
</style>
</head>

<body>
<table width="700">
  <tr> 
    <td> <div class="contenitore"> 
        <div id="soprauno"></div>
        <div id="sopradue"></div>
        <div id="sopratre"></div>
        <div id="sopraquattro"></div>
        <div id="sopracinque"></div>
        <div id="corpo"></div>
        <div id="sottouno"></div>
        <div id="sottodue"></div>
        <div id="sottotre"></div>
        <div id="sottoquattro"></div>
        <div id="sottocinque"></div>
      </div></td>
    <td></td>
  </tr>
  <tr> 
    <td></td>
    <td></td>
  </tr>
</table>
</body>
</html>

nel tuo css:

codice:

table{
	position: relative;
	top: 300px
}
.contenitore{
	position: relative;
	top: -15px
}
#corpo{
	position: absolute;
	top: 15px;
	left: 15px;
	width: 20px;
	height: 1px;
	border-top: 1px solid #000
}
#soprauno, #sopradue, #sopratre, #sopraquattro, #sopracinque, #sottouno, #sottodue, #sottotre, #sottoquattro, #sottocinque{
	position: absolute;
	left: 29px;
	height: 1px;
	border-top: 1px solid #000
}
#soprauno{
	top: 14px;
	width: 5px
}
#sopradue{
	top: 13px;
	width: 4px
}
#sopratre{
	top: 12px;
	width: 3px
}
#sopraquattro{
	top: 11px;
	width: 2px
}
#sopracinque{
	top: 10px;
	width: 1px
}

#sottouno{
	top: 16px;
	width: 5px
}
#sottodue{
	top: 17px;
	width: 4px
}
#sottotre{
	top: 18px;
	width: 3px
}
#sottoquattro{
	top: 19px;
	width: 2px
}
#sottocinque{
	top: 20px;
	width: 1px
}

Discussione: disegnare coni css

Strumenti discussione

Ricerca discussione

Visualizza

disegnare coni css

Re: disegnare coni css

un esempio

Re: un esempio

Permessi di invio