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é.

Background split by diagonal line

15
demandé sur MG1 2013-02-07 01:28:45

3 réponses

http://jsbin.com/iqemot/1/edit

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>
15
répondu gotohales 2017-06-05 16:30:39

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);
}

JSFiddle

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.

JSFiddle

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

18
répondu Harvey 2017-05-23 12:32:35

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%);
}
17
répondu Tom Brinkkemper 2016-09-20 09:41:53