Forme géométrique / CSS Shape

**OcB974** · 31/05/2015, 22h18

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

**NoSmoking** · 05/06/2015, 18h59

Bonjour,
dans les pseudo-éléments :before/:after on ne peut mettre du texte que via la propriété CSS content, donc si cela te convient il te suffit de l'utiliser.

**CCyrillus** · 06/06/2015, 16h31

Bonjour,

la fluidité que tu cherche a faire avec ton texte peut-être éventuellement réaliser a l'aide d’élément (ou pseudos) flottants.

un exemple simple en dégageant le texte sur 2 paragraphe. http://codepen.io/anon/pen/zGwKJe

La structure du codepen peut, si la longueur du texte est connue, être réalisé avec 3 pseudos flottant et un seul paragraphe.
les fonds pourraient éventuellement être fait avec des gradient et le mix-blend-mode, mais reduirait fortement la compatibilité.

++

<edit> RE, exemple avec pseudos , 1 titre + 1 paragraphe dans conteneurs imbriqués http://codepen.io/gc-nomade/pen/rVmWoV

**OcB974** · 15/06/2015, 15h56

Merci pour vos réponse les amis

Forme géométrique / CSS Shape [CSS 3]

CSS

Vue hybride

Discussions similaires

Partager

Partager