Hình tam giác với hình nền

Question

Tôi đang làm việc trên một dự án gọi hai hình tam giác để giữ hình nền và là liên kết.

Đây là mô phỏng của tôi về cách tôi muốn hai hình tam giác.

Hiện nay, tôi chỉ có hai divs rằng span 900x600 với mỗi tam giác làm hình nền. Vấn đề tôi đang gặp bây giờ là tôi không thể di chuột qua phần trong suốt của Cinema div để tiếp cận div ảnh.

Tôi có thể hoàn thành thiết kế này với hình tam giác css3 và đặt hình nền của chúng không? Tôi luôn nghĩ rằng hình dạng tùy chỉnh được tạo thành từ một đường viền, với một đường viền màu.

Có thể thực hiện với hình tam giác css3 và nếu có, ai đó có thể giúp tôi bằng mã không?

Đây là những gì tôi hiện có.

.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

Nó thực sự dễ dàng nếu bạn sử dụng hình ảnh con cho các liên kết thay vì hình ảnh nền. Bạn chỉ cần nghiêng hai phần tử .option có nguồn gốc biến đổi khác nhau, sau đó hủy hình ảnh con của chúng và đặt overflow: hidden trên cả hai yếu tố .pageOption và .option. Hỗ trợ là tốt, nên làm việc cho tất cả mọi thứ ngoại trừ IE8/7 và Opera Mini.

DEMO

quả:

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> 

liên quan 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

Như bạn nói, tringles css3 được làm từ biên giới, do đó bạn không thể đính kèm hình nền cho họ.

Tôi sẽ đề nghị bạn chỉ sử dụng hai PNG một cái khác và sử dụng js để nghe sự kiện nhấp và tạo hành động chính xác dựa trên vị trí chuột.

Ngoài ra còn có một tài sản webkit-mặt nạ css nhưng nó rất không được hỗ trợ trong các trình duyệt khác (tôi đã sử dụng nó cho một chút pageing đóng cọc lừa - http://jsfiddle.net/xTNTH/3/ - tốt nhất trên safari [không js chỉ css] - http://snag.gy/7fRNq.jpg)

Answer 3

đây là các đề xuất CSS của tôi:

1. Sử dụng canvas là thẻ HTML5 và không phải là trình duyệt chéo.
2. Sử dụng SVG. (Hình ảnh đáng tin cậy nhất)
3. Sử dụng chuyển đổi xoay CSS3 và bao gồm nó trong trình bao bọc có tràn ẩn. Một lần nữa không phải là trình duyệt chéo.

Xoay chuyển:

-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

Bạn có thể đạt được bố cục này bằng một số cách tiếp cận. Dưới đây là một ví dụ sử dụng một inline svg và 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>