Bonjour,

Je viens à vous car je souhaite "dessiner" avec CSS.
Cela me permet entre autres de pratiquer et de voir ce que je n'ai pas bien compris...

Et j'ai un petit soucis:
Nom : Capture.PNG Affichages : 1213 Taille : 12,0 Ko

1) Je suis parti d'un rectangle
2) J'ai créé des triangles gauche en haut et en bas ou dessiner une pointe au rectangle.
Jusque la... tout va bien...

Mais la suite... Mon texte doit aller au milieu du rectangle noir et il est en dessous...
Et mes deux autres triangles doivent être à droite pour réalise un effet de fleche à droite et sont aussi en dessous...

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
<body>
   <div class = "rectangle_noir">
     <div class = "rectangle_noir_1">
     <div class = "triangle_gauche_haut">
     </div>
     <div class = "triangle_gauche_bas">
    </div>
     </div>
     <div class = "rectangle_noir_2">
       <h1>TITRE</h1>
     </div>
     <div class = "rectangle_noir_3">
     <div class = "triangle_droit_haut">
     </div>
     <div class = "triangle_droit_bas">
    </div>
   </div>
   </div>
</body>

Code CSS : 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
.rectangle_noir 
{
  display: inline-block;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 500px;
  height: 150px;
  background: #000000;
}
 
.rectangle_noir_1
{
  display: column;
  width: 20%;
}
 
.rectangle_noir_2
{
  display: column;
  width: 60%;
}
 
h1
{
  color: red;
}
 
.rectangle_noir_3
{
  display: column;
  width: 20%;
}
 
.triangle_gauche_haut
{
 height : 0;
 width : 0;
 border-right : 0px solid;
 border-bottom : 75px solid black;
 border-left : 80px solid white;
}
 
.triangle_gauche_bas
{
 height : 0;
 width : 0;
 border-right : 80px solid black;
 border-bottom : 75px solid white;
 border-left : 0 px solid white;
}
 
.triangle_droit_haut
{
 height : 0;
 width : 0;
 border-right : 80px solid black;
 border-bottom : 75px solid white;
 border-left : 0 px solid white;
}
 
.triangle_droit_bas
{
 height : 0;
 width : 0;
 border-right : 0px solid;
 border-bottom : 75px solid black;
 border-left : 80px solid white;
}

Des idées de ou j'ai pu m’emmêler les pinceaux?

D'avance merci pour votre aide