J'ai 10 divs en ligne, qui ont le même type de dégradé - 45deg lignes, mais les dégradés ont des couleurs différentes et les divs ont une largeur différente.
Est-il possible de faire correspondre le dégradé? (espérons que les photos ci-dessous l'expliquent)
Mon CSS pour le dégradé. Seule la couleur change.
<div id="div1" style="width: 30px"></div><div id="div2" style="width: 40px"></div>
#div1 {
background: repeating-linear-gradient(
45deg,
rgba(155,155,155,0.8),
rgba(155,155,155,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px);
}
#div2 {
background: repeating-linear-gradient(
45deg,
rgba(235,102,107,0.6),
rgba(235,102,107,0.6) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px);
}
div {
height:100px;
display:inline-block;
}
À quoi ça ressemble maintenant (les lignes ne correspondent pas):
À quoi je veux que ça ressemble:
4 Réponses :
Faites-en une ligne div, et utilisez quelque chose comme:
<section class="section-book" id="book">
<div class="row">
<div class="book">
<div class="book__form">
<form action="#" class="form">
Les pourcentages, s'ils sont égaux, provoquent un changement de couleur immédiat, plutôt que graduel. Cela va donc de ma couleur blanche à transparente. Ainsi, l'utilisation d'un div gardera les lignes droites et les pourcentages changeront les couleurs. J'avais une inclinaison sur la mienne, vous voudrez donc changer l'angle initial.
HTML:
.book {
background-image: linear-gradient(105deg,
rgba($color-white, .9) 0%,
rgba($color-white, .9) 50%,
transparent 50%),
url(../img/nat-10.jpg);
Pourriez-vous gentiment ajouter du html? Cela fonctionne-t-il si les divs ont une couleur de dégradé différente?
J'ai eu celui-ci:
<div id="div1" style="width: 100px; height: 50px;"></div> <div id="div2" style="width: 100px; height: 50px;"></div>
#div1 {
background: repeating-linear-gradient(
45deg,
rgba(155,155,155,0.8),
rgba(155,155,155,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px);
}
#div2 {
background: repeating-linear-gradient(
45deg,
rgba(235,102,107,0.6),
rgba(235,102,107,0.6) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px);
background-position: -1px;
}
<div id="div1" style="width: 100px; height: 50px;"></div>
Je pense que la position d'arrière-plan est ce que vous recherchez
Merci, cela ne fonctionne pas pour moi car j'ai une largeur de div différente. J'ai testé avec un autre exemple - et je devrais aller pour background-position: -6px. Mais certainement quelque chose avec lequel jouer. +1
Je pense que cela ferait l'affaire: rendez vos divs solides et posez un div rayé dessus. (inspiré par Byoung730)
your example:<br> <div id="div1" style="width: 100px"></div><div id="div2" style="width: 400px"></div> smooth one:<br> <div id="div3" style="width: 100px"></div><div id="div4" style="width: 400px"></div><div id="div5"></div>
div {height: 100px; display: inline-block;}
#div1 {
background: repeating-linear-gradient(
45deg,
rgba(155,155,155,0.8),
rgba(155,155,155,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px);
}
#div2 {
background: repeating-linear-gradient(
45deg,
rgba(235,102,107,0.6),
rgba(235,102,107,0.6) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px);
}
#div3 {
background:rgba(155,155,155,0.8)}
#div4 {
background:rgba(235,102,107,0.6)}
#div5 {
position: relative;
top: -100px;
width: 500px;
background: repeating-linear-gradient(
45deg,
rgba(255,255,255,1),
rgba(255,255,255,1) 3px,
rgba(255,255,255,0) 3px,
rgba(255,255,255,0) 6px);}
Vous pouvez utiliser les deux dégradés sur le même élément et utiliser l'astuce background-clip pour masquer une partie du premier qui n'ira pas jusqu'au remplissage où vous verrez le second:
<div class="box"></div>
.box {
height:100px;
width:300px;
position:relative;
display:inline-block;
background:
repeating-linear-gradient(
45deg,
transparent,
transparent 3px,
rgba(250,250,250,1) 3px,
rgba(250,250,250,1) 6px),
linear-gradient(to right,
rgba(235,102,107,0.6) 20%,
rgba(155,155,155,0.8) 20%, rgba(155,155,155,0.8) 40%,
rgba(15,15,15,0.8) 40%);
}
Si vous avez plus de 2 dégradés, vous pouvez considérer background-size . L'astuce consiste à avoir un calque d'arrière-plan blanc sous chacun pour masquer le dégradé précédent:
<div class="box" id="f1"></div><div class="box" id="f2" style="width:100px"></div><div class="box" id="f3" style="width:150px"></div>
.box {
height:100px;
width:30px;
margin:5px 0;
display:inline-block;
background-attachment:fixed;
}
#f1 {
background-image:repeating-linear-gradient(
45deg,
rgba(155,155,155,0.8),
rgba(155,155,155,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px);
}
#f2 {
background-image:repeating-linear-gradient(
45deg,
rgba(15,15,15,0.8),
rgba(15,15,15,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px);
}
#f3 {
background-image:repeating-linear-gradient(
45deg,
rgba(12,155,155,0.8),
rgba(12,155,155,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px);
}
Voici une autre idée qui s'appuie sur le mix-blend-mode pour obtenir le même résultat avec moins de code:
<div class="box"></div>
.box {
height:100px;
width:300px;
position:relative;
display:inline-block;
background:
repeating-linear-gradient(
45deg,
rgba(0,0,0,0.6),
rgba(0,0,0,0.6) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px),
#fff;
}
.box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(to right,blue 20%,red 20%, red 40%,orange 40%);
mix-blend-mode: lighten;
}
Voici une autre idée qui repose sur background-attachment: fixed où vous pouvez également conserver la transparence:
<div class="box"></div>
.box {
height:100px;
width:300px;
margin:5px;
display:inline-block;
background:
/*First gradient*/
repeating-linear-gradient(
45deg,
rgba(235,102,107,0.6),
rgba(235,102,107,0.6) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px) left/30% 100%,
linear-gradient(#fff,#fff) left/30% 100%,
/*Second one*/
repeating-linear-gradient(
45deg,
rgba(155,155,155,0.8),
rgba(155,155,155,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px) left/60% 100%,
linear-gradient(#fff,#fff) left/60% 100%,
/**/
repeating-linear-gradient(
45deg,
rgba(15,15,15,0.8),
rgba(15,15,15,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px) left/80% 100%,
linear-gradient(#fff,#fff) left/80% 100%,
/**/
repeating-linear-gradient(
45deg,
rgba(12,155,155,0.8),
rgba(12,155,155,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px) left/100% 100%,
linear-gradient(#fff,#fff) left/100% 100%;
background-repeat:no-repeat;
}
Une autre façon avec plusieurs arrière-plans:
<div class="box"></div> <div class="box" style="width:100px;"></div> <div class="box" style="padding-right:100px;"></div>
.box {
height:100px;
width:80px;
padding-right:50px;
margin:5px;
display:inline-block;
background:
repeating-linear-gradient(
45deg,
rgba(235,102,107,0.6),
rgba(235,102,107,0.6) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px) content-box,
linear-gradient(#fff,#fff) content-box, /*avoid the overlap of both gradient*/
repeating-linear-gradient(
45deg,
rgba(155,155,155,0.8),
rgba(155,155,155,0.8) 3px,
rgba(250,250,250,0.4) 3px,
rgba(250,250,250,0.4) 6px) padding-box;
}
Merci beaucoup pour cette réponse détaillée avec des exemples! J'ai choisi background-attachment: fixed qui fonctionne très bien pour moi.