Découpage façon illustration jeu de carte

Bonjour,

Pouvez-vous m'aider svp ?
je souhaite réaliser l'intégration suivante en css et html de façon à avoir un ying et un yang désolidarisé, cliquable et animable.
Imaginez le symbole avec une césure parfaite sur la diagonale.


Comment faire pour gérer ensuite 2 blocs, 2 animations au sein d'une "seule et même" image (2 en fait mais une en apparence ^^). Vous me suivez ?

Callie

Bonjour,

voici un brouillon utilisant 2 techniques : les triangles CSS à base de bordure (je laisse les couleurs chatoyantes exprès pour montrer comment ça fonctionne ) et 2 disques utilisant les pseudos puis positionnés librement avec transform
http://codepen.io/PhilippeVay/pen/pNVOXM?editors=0100

<div class="yy"></div>

.yy {
  width: 0;
  border: 1rem solid yellow;
  border-color: red blue yellow darkviolet;
}
.yy:before,
.yy:after {
  content: '';
  position: absolute;
  border: 4px solid white;
    border-radius: 50%;
  /* centrage */
  margin-left: -4px;
  margin-top: -4px;
}
.yy:before {
  transform: translate(-6px, -6px);
}
.yy:after {
  transform: translate(6px, 6px);
  border-color: black;
}

Modifié par Felipe (07 Dec 2016 - 14:38)

Bonjour et merci Felipe, c'est vraiment cool super gentil mais ça ne répond pas trop à ce que je cherche à faire.
Je vais tâcher d'être plus claire.
Pour reprendre ton rendu, je voudrais pouvoir rassembler, cliquer et animer le bloc triangle (violet/rouge) qui aurait un background de mon ying et la même chose avec le yang, un triangle qui pourrait recevoir un effet (genre extraction 3d du visu à plat) et qui regrouperait ton triangle bleu et jaune comme si j'avais 2 boutons... (c'est la césure diagonale qui me pose problème en fait !)

Callie
Modifié par callie (07 Dec 2016 - 14:55)

Tu peux dans ce cas utiliser 2 éléments et parmi les 4 couleurs de border-color en définir 2 à transparent, c'est la technique des triangles CSS pointant vers un coin https://davidwalsh.name/css-triangles (pour ceux pointant vers un côté c'est 3 fois transparent)

Coucou,

Merci grandement pour le coup de main.

D'un point de vue css oui. Maintenant est-ce qu'avec ton code je peux animer "genre zoom" on mousehover et reprendre ça place en mouseout pour chaque triangle ?

Callie

callie a écrit :
Maintenant est-ce qu'avec ton code je peux animer "genre zoom" on mousehover et reprendre ça place en mouseout pour chaque triangle ?
Callie

En théorie oui, en pratique, cela dépend du visuel recherché car il y a une rotation et un overflow:hidden; déjà en place contraignant et a ne pas contrarier

Exemple restreint possible : http://codepen.io/gc-nomade/pen/QGZazg .

Cdt,