web-dev-qa-db-fra.com

Forme triangulaire avec image d'arrière-plan

Je travaille sur un projet qui fait appel à deux triangles pour contenir les images de fond et être des liens.

Voici ma maquette de la façon dont je voudrais les deux triangles.

Triangles with background images

Actuellement, je n'ai que deux divs qui couvrent les 900x600 avec chaque triangle comme image de fond. Le problème que j'ai maintenant est que je ne peux pas survoler la partie transparente de la division Cinema pour atteindre la division photo.

Puis-je réaliser cette conception avec des triangles css3 et définir leurs images d'arrière-plan? J'ai toujours pensé que la forme personnalisée était composée d'une bordure, avec une couleur de bordure.

Est-il possible de faire avec des triangles css3, et si oui, quelqu'un peut-il m'aider avec le code?

Voici ce que j'ai actuellement.

.pageOption {
  position: relative;
  width: 900px;
  height: 600px;
}
.pageOption .photo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuPhoto.png') no-repeat 0 0;
}
.pageOption .cinema {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuCinema.png') no-repeat 0 0;
}
<div class="pageOption">
  <a href="#" class="option photo" id="weddingPhoto"></a>
  <a href="#" class="option cinema" id="weddingCinema"></a>
</div>
csssvgcss-shapes
21
Ryan

C'est vraiment facile si vous utilisez des images enfants pour les liens au lieu d'images d'arrière-plan. Il vous suffit de biaiser les deux .option éléments avec différentes origines de transformation, puis dé-inclinez leurs images enfants et définissez overflow: hidden à la fois .pageOption et le .option éléments. Le support est bon, devrait fonctionner pour tout sauf IE8/7 et Opera Mini.

[~ # ~] démo [~ # ~]

Résultat :

triangle images

[~ # ~] html [~ # ~] :

<div class='pageOption'>
  <a href='#' class='option' data-inf='photo'>
    <img src='../images/menuPhoto.png'>
  </a>
  <a href='#' class='option' data-inf='cinema'>
    <img src='../images/menuCinema.png'>
  </a>
</div>

Pertinent [~ # ~] css [~ # ~] :

.pageOption {
  overflow: hidden;
  position: relative;
  width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
}
.option:first-child {
  left: -.25em;
  transform-Origin: 100% 0;
}
.option:last-child {
  right: -.25em;
  transform-Origin: 0 100%;
}
.option img {
  transform: skewX(55.98deg);
  transform-Origin: inherit;
}
40
Ana

Vous pouvez réaliser cette mise en page avec plusieurs approches. Voici un exemple utilisant un svg en ligne et le élément clip-path :

<svg viewbox="0 0 10 6.7">
  <defs>
    <clipPath id="top">
      <polygon points="0 0, 9.9 0, 0 6.6" />
    </clipPath>
    <clipPath id="bottom">
      <polygon points="10 0.1, 10 6.7, 0.1 6.7" />
    </clipPath>
  </defs>
  <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#top)"/>
  <image xlink:href="http://i.imgur.com/5NK0H1e.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#bottom)"/>
</svg>
5
web-tiki

Voici mes suggestions CSS:

  1. Utilisation de canvas qui est une balise HTML5 et non un navigateur croisé.
  2. Utilisation de SVG . (Le plus fiable)
  3. En utilisant CSS3, faites pivoter la transition et couvrez-la dans un wrapper avec un débordement caché. Encore une fois, ce n'est pas un navigateur croisé.

Rotation de la transition: 

-webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome 
   -moz-transform: rotate(7.5deg);  /* FF3.5+ 
    -ms-transform: rotate(7.5deg);  /* IE9 
     -o-transform: rotate(7.5deg);  /* Opera 10.5 
        transform: rotate(7.5deg);
           filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 
                   M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
3
Tooraj Jam

Comme vous l'avez dit, les tringles css3 sont constitués de bordures, vous ne pouvez donc pas y attacher d'arrière-plans.

Je vous suggère d'utiliser simplement deux PNG l'un sur l'autre et d'utiliser js pour écouter l'événement de clic et créer l'action correcte en fonction de la position de la souris.

Il existe également une propriété css webkit-mask mais elle n'est pas prise en charge dans d'autres navigateurs (je l'ai utilisée pour un petit truc de pilling de page - http://jsfiddle.net/xTNTH/3/ - meilleur sur safari [pas de js uniquement css] - http://snag.gy/7fRNq.jpg )

0
Oren Roth