Bonjour tout le monde!

Je viens vers vous aujourd'hui car je ne m'en sors plus avec mon CSS et je sature!
Voici ce que je voudrais faire (à gauche) et ce que j'ai fais (à droite):
Nom : adriends.jpg Affichages : 90 Taille : 7,4 Ko

Comme vous pouvez le voir, je ne suis pas arrivé à faire les bords arrondis, j'ai des soucis avec la box-shadow, le border-bottom (effet lumineux blanc), et surtout le CSS ne veut pas remplacer la couleur gris foncé par la texture qui se répète...

Petite précision: la couleur gris foncé est un menu et le gris clair est le body.

Voici le code que j'ai actuellement (très basique):

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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
<html>
<body>
<style>
html, body {
        background: #555;
        line-height: 1.4;
        height: 100%;
        margin: 0;
        padding: 0;
}
#rectangle {
   width: 100%;
   height: 160px;
   background: #222;
   border-bottom: 1px solid #fff;
   box-shadow: 1px 1px 12px #000 inset;
}
#rectangle:before {
   content:"";
   position: absolute; 
   height: 0;
   width: 660px;
   margin-top: 160px;
   margin-left: 585px;
   border-top: 30px solid #222;
   border-bottom: 1px solid #fff;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   box-shadow: 10px 10px 120px #fff inset;
}
</style>
    <div id="rectangle"></div>
</body>
</html>

J'espère sincèrement que vous pourrez m'aider.
En tout cas merci pour vos réactions!