2 pièce(s) jointe(s)
Forme géométrique / CSS Shape
Bonjour,
je souhaite réaliser des forme géométrique comme l'image ci-dessous:
Pièce jointe 179337
Chaque "bloc" aura du texte à l'intérieur, comme l'image ci-dessous:
Pièce jointe 179338
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:
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:
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 :mrgreen:
