Trois couleurs couleur de fond en angle
Comment pourrais-je obtenir un fond qui ressemble à cette image:
seulement 3 couleurs, en angle du coin supérieur comme un sunray.
s'en tenir à une simple image de fond PNG ou SVG serait peut-être une meilleure approche.
4 réponses
l'effet peut être obtenu avec CSS en utilisant des pseudo-éléments et des transformations et le ci-dessous est un échantillon. Mais je ne pense pas que l'utilisation de CSS est la bonne option pour cela. Il serait préférable d'utiliser une image PNG.
l'extrait utilise un couple de pseudo-éléments avec des couleurs de fond différentes déformées aux angles requis pour produire l'effet de trois couleurs.
.bg {
position: relative;
height: 200px;
width: 400px;
padding: 4px;
background: orange;
overflow: hidden;
}
.bg:after,
.bg:before {
position: absolute;
content: '';
left: 0px;
height: 100%;
width: 100%;
transform-origin: right top;
}
.bg:before {
top: 0px;
background: red;
transform: skewY(-45deg);
}
.bg:after {
top: -100%;
background: yellow;
transform: skewY(-15deg);
}
span {
position: relative;
z-index: 2;
}
/* Just for demo */
.bg:hover {
height: 200px;
width: 500px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bg">
<span>Some content inside</span>
</div>gradients linéaires à angle aussi pourrait être utilisé, mais je ne pense pas qu'ils sont bons pour les éléments de conteneurs de taille dynamique que les angles doivent être modifiés que les dimensions changent pour garder l'apparence identique.
ci-dessous est un extrait en utilisant linear-gradient . Passez en stationnaire sur la forme pour voir comment un changement de largeur et/ou de hauteur l'affecte.
.bg {
position: relative;
height: 200px;
width: 400px;
background: linear-gradient(310deg, red 30%, transparent 30%), linear-gradient(340deg, transparent 58%, yellow 58%), orange;
overflow: hidden;
}
.bg:hover {
height: 200px;
width: 500px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bg">
<span>Some content inside</span>
</div>SVG
cela peut être fait avec SVG.
J'ai utilisé trois polygone formes. Cela peut être réglé sur un background-image .
Ou peut être utilisé en ligne de sorte que vous pouvez utiliser des propriétés css.
html, body {
margin: 0;
padding: 0;
}
.triple {
width: 250px;
height: 250px;
}
.triple:hover {
width: 500px;
height: 100px;
}<svg class="triple" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon fill="#dd2" points="0,0 100,0 0,60" />
<polygon fill="#bb2" points="0,60 100,0 30,100 0,100 " />
<polygon fill="#992" points="30,100 100,0 100,100" />
</svg>Oui, cela peut être fait avec des gradients, d'une manière réactive.
qui suppose que lorsque le rapport d'aspect change, vous ne voulez pas garder les angles ,mais les positions relatives
le truc est d'utiliser des noms simboliques dans la direction du gradient, puis de jouer avec la taille et la position de l'arrière-plan-image
.test {
display: inline-block;
border: solid 1px black;
background-image: linear-gradient(to top left, tomato 50%, transparent 50%),
linear-gradient(to bottom right, lightgreen 50%, transparent 50%);
background-size: 60% 100%, 100% 50%;
background-repeat: no-repeat;
background-position: bottom right, top left;
}
#test1 {
width: 200px;
height: 100px;
}
#test2 {
width: 100px;
height: 100px;
}
#test3 {
width: 70px;
height: 100px;
}<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
<div class="test" id="test3"></div>utilisez une image GIF en 4 couleurs. Cela vous donnera à la fois la compatibilité inter-navigateur/plate-forme ainsi que la compatibilité arrière, et la taille sera petite avec ce type d'image. Si les couleurs sont subtiles comme indiqué les "jaggies" seront quelque peu camouflées (ou fournir une plus grande taille).
une bonne option est D'utiliser SVG qui a une bonne prise en charge dans les navigateurs modernes à jour.