Trapèze en CSS

Version imprimable

28/10/2011, 11h34
Gidici

1 pièce(s) jointe(s)

Trapèze en CSS

Bonjour
je suis nouveau dans le forum.
j'ai un petit problème avec une forme en CSS,(voir photo)je n'arrive pas a trouver la bonne solution.
vous avez une idee svp.

merci de pour votre réponse
Gidici
28/10/2011, 16h49
Emyleen

Alors je n'ai pas très bien compris donc peut être que je vais te répondre à coté de la plaque.

En fait tu souhaiterai obtenir en css l'image que tu montre c'est ça?

Alors c'est un peu compliqué mais ça se fait, il te suffit de faire une div de la couleur foncé de ton image, et tu y insère une div en float right (enfin à droite quoi) avec cette technique : http://tipsntools.pasapix.com/integr...iangle-en-css/

J'espère avoir répondu à ta demande :)

1 pièce(s) jointe(s)

Merci pour ton aide,javais dejà vu le liens que tu me donne,mais en effet mon script il est dans cette façon :
Code:

1 2 3 4 5 6 7 <ul id="nav"> <li><a href="#">PROFIL</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">VIDEO</a></li> </ul>
le résultat devrait être comme la photo(piece joint)
j'ai essayé de mettre l'image en background dans la balise

Code:

<li>

mais c est logique que j'ai la même photo sur toutes les balise
peut etre que à la place c'est meilleur d'utiliser des

Code:

<div>

?

je vais tester ça,
je suis désolé mais c'est ma première expérience avec html et css et je me sent un eu perdu:cry:
merci encore
Gidici

Bonjour,
Bon alors si ton problème n'est pas résolu voici la solution :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
ul {
	list-style: none;
}
ul li {
	height: 20px;
	margin-bottom: 1px;
}
ul a {
	background-color: #000000;
	color: #FFFFFF;
    display: inline-block;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding-left: 5px;
    text-decoration: none;
    text-transform: lowercase;
	min-width: 75px;
	min-height: 20px;
}
.css-arrow-top {
    border-color: transparent transparent #FFFFFF #000000;
    border-style: solid;
    border-width: 0 0 20px 15px;
    float: right;
    height: 0;
    margin-left: 10px;
    width: 0;
}
.css-arrow-bottom {
    border-color: transparent #FFFFFF #000000;
    border-style: solid;
    border-width: 0 15px 20px 0;
    float: right;
    height: 0;
    margin-left: 10px;
    width: 0;
}

Code:

1
2
3
4
5
6
<ul id="nav">
    <li><a href="#">PROFIL<div class='css-arrow-top'></div></a></li>
    <li><a href="#">CONTACT<div class='css-arrow-bottom'></div></a></li>
    <li><a href="#">GALLERY<div class='css-arrow-top'></div></a></li>
    <li><a href="#">VIDEO<div class='css-arrow-bottom'></div></a></li>
</ul>

ça correspond à ta demande cette fois-ci? ^^