Kształt trójkąta z obrazem tła

Question

Pracuję nad projektem, który wymaga dwóch trójkątów do przechowywania obrazów tła i linków.

Oto moja makiety, jak chciałbym dwa trójkąty.

Obecnie mam tylko dwie div, które obejmują 900x600 z każdego trójkąta jako obraz tła. Problem, który mam teraz, polega na tym, że nie mogę najechać kursorem na przezroczystą część elementu Cinema div, aby dotrzeć do elementu div zdjęcia.

Czy mogę wykonać ten projekt z trójkątami css3 i ustawić ich obrazy tła? Zawsze myślałem, że niestandardowy kształt składa się z obramowania, z obramowaniem.

Czy można to zrobić z trójkątami css3, a jeśli tak, to czy ktoś może mi pomóc z kodem?

Oto, co obecnie mam.

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

Answer 1

To naprawdę proste, jeśli użyć wizerunki dzieci za linki zamiast obrazów tła. Wystarczy pochylić dwa elementy .option z różnymi początkami transformacji, a następnie odłączyć ich obrazy podrzędne i ustawić overflow: hidden zarówno na elementach .pageOption, jak i na elementach .option. Wsparcie jest dobre, powinno działać dla wszystkiego oprócz IE8/7 i Opery Mini.

DEMO

Wynik:

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> 

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

Answer 2

Jak powiedział tringles CSS3 wykonane są z granicami, więc nie można dołączyć do nich tła.

Proponuję, abyś użył dwóch PNG po kolei i używał js, aby posłuchać zdarzenia kliknięcia i utworzyć poprawną akcję w oparciu o pozycję myszy.

Istnieje również własność WebKit maska ​​css ale bardzo nieobsługiwane w innych przeglądarkach (użyłem go na mały pageing pilling podstęp - http://jsfiddle.net/xTNTH/3/ - najlepiej na safari [no js tylko css] - http://snag.gy/7fRNq.jpg)

Answer 3

Tutaj to są moje sugestie CSS:

1. Używanie tagu HTML5 i nie jest przeglądarką.
2. Korzystanie z SVG. (Najbardziej niezawodny)
3. Za pomocą CSS3 obracaj przejście i zakryj je w opakowaniu z ukrytym przelewem. Ponownie nie jest to przeglądarka internetowa.

Obrót przejście:

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

Answer 4

Możesz osiągnąć ten układ kilkoma podejściami. Oto przykład przy użyciu inline svg i clip-path element:

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