web-dev-qa-db-fra.com

Fond bicolore divisé par une ligne diagonale à l'aide de CSS

J'essaie de créer un arrière-plan en utilisant CSS où un côté est une couleur unie et l'autre est une texture: les deux sont séparés par une ligne diagonale. Je voudrais que ce soit 2 divs séparés car je prévois d'ajouter du mouvement avec jQuery où si vous cliquez à droite, le triangle gris devient plus petit et si vous cliquez à gauche le triangle texturé devient plus petit (comme un effet de rideau). Tout avis serait grandement apprécié.

Background split by diagonal line

csscss3css-transitions
20
MG1

Voici les exemples en action: http://jsbin.com/iqemot/1/edit

Vous pouvez modifier le placement de la ligne diagonale avec les pixels de bordure. Avec cette approche, vous devrez cependant positionner le contenu sur la configuration d'arrière-plan.

#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>
16
gotohales

Je pense que l'utilisation d'un dégradé de fond avec une transition difficile est une solution très propre:

.diagonal-split-background{
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}
22
Tom Brinkkemper

Pour ce genre de chose, vous pouvez utiliser des pseudo-sélecteurs tels que :before ou :after dans votre CSS pour minimiser 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);
}

JSFiddle

J'ai ensuite essayé de faire en sorte que chaque section puisse se développer en fonction de 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 déterminée.

Une classe est ensuite ajoutée à la case qui modifie le :before pseudo-objet. L'avantage d'utiliser une classe est que les animations CSS sont mieux optimisées pour le navigateur que celles jQuery.

JSFiddle

Ressources:

Sélection et manipulation de pseudo-éléments CSS tels que :: avant et :: après l'utilisation de jQuery

en utilisant jQuery comment obtenir les coordonnées de clic sur l'élément cible

19
Harvey