Bonjour,

je souhaite réaliser des forme géométrique comme l'image ci-dessous:

Nom : 01.png Affichages : 1065 Taille : 23,1 Ko

Chaque "bloc" aura du texte à l'intérieur, comme l'image ci-dessous:

Nom : 02.jpg Affichages : 1154 Taille : 201,6 Ko

Mon problème: comme vous le voyez sur l'image ci dessus, c'est une div avec after & before, mais je peux pas les fusionné. Je ne sais pas vraiment comment y procéder, à part de diviser en plusieurs bloc et chaque texte dans un bloc .

Bon, voici mon code:

HTML
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<body>
	<div id="bloc">
		<div id="puzzle"></div>
		<div id="puzzle"></div>
		<div id="puzzle"></div>
	        <div id="puzzle"></div>
	</div>
</body>

CSS
Code : 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
#bloc{
    width: 100% ;
    min-height: 250px ;
    background: blue ;
    margin: 0 auto ;
    padding: 50px ;
}
 
#puzzle {
    width: 12%;
    height: 226.5px;
    background: #fc5e5e;
    position: relative;
    margin: 0 5%;
    display: inline-block;
}
 
#puzzle:before {
    content: '' ;
    position: absolute;
    top: 25%;
    left: 100% ;
    width: 100px ;
    height: 75.4% ;
    background: red ;
}
 
#puzzle:after {
    content: '' ;
    width: 75.4%;
    height: 25%;
    position: absolute;
    background: yellow ;
    top: 100% ;
    left: 50% ;
}
Est t'il possible de le réaliser ?

Pour résumé, j'aimerais trouvé une solution, ou une piste de développement pour me permettre d'avoir un bloc de la même forme, contenant du texte à l'intérieur.

Merci pour votre aide