पृष्ठभूमि छवि के साथ त्रिकोण आकार

Question

मैं एक ऐसे प्रोजेक्ट पर काम कर रहा हूं जो पृष्ठभूमि छवियों को पकड़ने के लिए दो त्रिकोणों को कॉल करता है, और लिंक बनता है।

यहां मेरा मजाक है कि मैं दो त्रिकोण कैसे पसंद करूंगा।

वर्तमान में, मैं सिर्फ दो divs कि एक पृष्ठभूमि छवि के रूप में प्रत्येक त्रिकोण के साथ 900x600 अवधि की है। अब मेरे पास यह मुद्दा है कि मैं फोटो div तक पहुंचने के लिए सिनेमा div के पारदर्शी हिस्से पर नहीं जा सकता।

क्या मैं इस डिजाइन को सीएसएस 3 त्रिकोण के साथ पूरा कर सकता हूं और अपनी पृष्ठभूमि छवियों को सेट कर सकता हूं? मैंने हमेशा सोचा कि कस्टम आकार सीमा से रंग के साथ सीमा से बना है।

क्या सीएसएस 3 त्रिकोणों के साथ ऐसा करना संभव है, और यदि ऐसा है, तो क्या कोई मुझे कोड के साथ मदद कर सकता है?

यहां वर्तमान में मेरे पास है।

.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

यदि आप पृष्ठभूमि छवियों के बजाय लिंक के लिए बच्चे छवियों का उपयोग वास्तव में आसान है। आपको अलग-अलग ट्रांसफॉर्म उत्पत्ति वाले दो .option तत्वों को छोड़ने की आवश्यकता है, फिर .pageOption और .option दोनों तत्वों पर overflow: hidden सेट करें। समर्थन अच्छा है, आईई 8/7 और ओपेरा मिनी को छोड़कर सबकुछ के लिए काम करना चाहिए।

DEMO

परिणाम:

एचटीएमएल:

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

प्रासंगिक सीएसएस:

.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

जैसा कि आपने कहा है ताकि आप उन्हें करने के लिए पृष्ठभूमि अनुलग्न नहीं कर सकते, css3 tringles सीमाओं के बने होते हैं।

मैं आपको सलाह देता हूं कि आप केवल दो पीएनजी का उपयोग दूसरे पर करें और जेएस का उपयोग करने के लिए क्लिक करें और क्लिक करें और माउस स्थिति के आधार पर सही कार्रवाई करें।

वहाँ भी एक वेबकिट-मुखौटा सीएसएस संपत्ति है, लेकिन अन्य ब्राउज़रों में बहुत असमर्थित (मैं एक छोटे से pageing pilling चाल के लिए यह प्रयोग किया जाता - http://jsfiddle.net/xTNTH/3/ - सफारी पर सबसे अच्छा [कोई js केवल सीएसएस] - http://snag.gy/7fRNq.jpg)

Answer 3

यहाँ मेरे सीएसएस सुझाव हैं:

1. canvas का उपयोग करना जो HTML5 टैग है और क्रॉस ब्राउज़र नहीं है।
2. SVG का उपयोग करना। (सबसे विश्वसनीय एक)
3. CSS3 घुमावदार संक्रमण का उपयोग करके और छिपे हुए अतिप्रवाह के साथ एक रैपर में इसे कवर करें। फिर क्रॉस ब्राउज़र नहीं है।

घुमाएँ संक्रमण:

-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

आप कई दृष्टिकोणों के साथ इस लेआउट को प्राप्त कर सकते हैं। यहाँ एक inline svg और 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>