Trapèze en CSS

[Gidici]

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

[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

[Gidici]

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
merci encore
Gidici

[Emyleen]

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

Code css :

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 html :

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? ^^