Fond bicolore divisé par une ligne diagonale à l'aide de css
j'essaye de créer un fond en utilisant css où un côté est une couleur unie et l'autre une texture: les deux sont divisés par une ligne diagonale. Je voudrais que ce soit 2 divs séparés puisque je prévois d'ajouter un peu de mouvement avec jQuery où si vous cliquez sur la droite, le triangle gris devient plus petit et si vous cliquez sur la gauche le triangle texturé devient plus petit (comme un effet de rideau). Tout conseil serait grandement apprécié.
3 réponses
vous pouvez changer l'emplacement de la ligne diagonale avec les pixels de bordure. Avec cette approche, vous devriez positionner le contenu sur la configuration de fond cependant.
#container {
height: 100px;
width: 100px;
overflow: hidden;
background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid gray;
border-right: 100px solid transparent;
}<div id="container">
<div id="triangle-topleft"></div>
</div>pour ce genre de choses, vous pouvez utiliser des pseudo-sélecteurs comme :before ou :after dans votre CSS pour réduire au minimum le balisage HTML inutile.
HTML:
<div id="container"></div>
CSS:
#container {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
background-color: grey;
}
#container:before {
content: '';
position: absolute;
left: 20%;
width: 100%;
height: 200%;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.5);
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
j'ai ensuite essayé de faire en sorte que chaque section pourrait se développer selon l'endroit où vous avez cliqué. Cela nécessite malheureusement un peu de jQuery supplémentaire car la position de votre clic (par rapport à la boîte) doit être travaillée hors.
une classe est alors ajoutée à la boîte qui change le :before pseudo objet. L'avantage d'utiliser une classe est que les animations CSS sont mieux optimisées pour le navigateur que les animations jQuery.
Ressources:
sélection et manipulation des pseudo-éléments CSS tels que:: before Et ::after using jQuery
utiliser jQuery comment obtenir les coordonnées de clic sur la cible l'élément
je pense que l'utilisation d'un dégradé d'arrière-plan avec une dur de transition est très propre solution:
.diagonal-split-background{
background-color: #013A6B;
background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}