Discussion :

[tpierre]

Bonjour,

Je souhaiterai faire une page HTML/CSS de fond noir avec des cadres blancs pour y insérer du texte. Cela n'est pas très compliqué.

Sur certain cadre, je souhaiterai faire un cadre bi-couleur rouge et blanc comme du rubalise : cf pièce jointe.

Question 1 : est-ce envisageable que en CSS ?
Question 2 : comment faire ?

Merci pour vos retour.

Cordialement

[mathieu]

si vous faites une recherche sur "rayures css" vous trouverez plein de sites qui propose des exemples de motifs en css.

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
<style>
        
        .fond
        {
                background : linear-gradient(45deg, #F00 12.5%, #fff 12.5%, #fff 37.5%, #F00 37.5%, #F00 62.5%, #fff 62.5%, #fff 87.5%, #F00 87.5%);
                background-size : 110px 110px;
                
                padding : 1em;
        }
 
        .contenu
        {
                background : #FFF;
                height : 10em;
                padding : 2em;
        }
 
</style>
 
 
<div class="fond">
	<div class="contenu">
		bla bla bla
	</div>
</div>

[NoSmoking]

Bonjour,
on peut s'épargner un élément de fond en utilisant les border-image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#container {
  border-image: repeating-linear-gradient(45deg, #FFF, #FFF 2em, #F00 2em, #F00 4em);
  border-image-slice: 45;
  border-image-width: 2.82em;
}

C'est quand même pas des plus intuitifs, il faut faire des approches !

Ressources :

• border-image
• repeating-linear-gradient()

[tpierre]

Merci beaucoup de ces réponses !

J'ai essayé plusieurs mot clé mais pas pensé à rayure.

Je vais regarder ça.

Cordialement.