त्रिकोण पृष्ठभूमि छवि

Question

आदरणीय stackoverflowers साथ सीएसएस,

मैं कैसे पृष्ठभूमि पैटर्न के साथ एक त्रिकोण तत्व बना सकता हूँ?

लेकिन मेरे राज्य इस तरह है::

त्रिकोण तत्वों के साथ सभी उदाहरण सीमाओं जो नहीं कर सकते एक img उपयोग

उदाहरण के लिए मैं इस तरह div की जरूरत उसमें ....

यह मेरा उपखंड वर्ग है जिसे कूलारो की आवश्यकता है:

<div class="subsection"><span>Ryan Gosling, Mr Landlord</span></div> 

.subsection { 
    .box-shadow (0, -1px, 1px, 0, rgba(0, 0, 0, 0.3)); 
    background: url('/assets/pattern-lorem.png'); // The inner part of the slider have the pattern 
    display: block; 
    clear: both; 
    float: left; 
    width: 100%; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    display: none; 
} 
.subsection { 
    position:relative; 
} 
.subsection:before { 
    content:''; 
    position:absolute; 
    top:0; 
    left:0; 
    height:20px; 
    width:0; 
    border-left:20px solid white; 
    border-bottom:16px solid transparent; 
} 
.subsection:after { 
    content:''; 
    position:absolute; 
    top:36px; 
    left:0; 
    bottom:0; 
    width:0; 
    border-left:20px solid white; 
    border-top:16px solid transparent; 
} 

और im हो रही:

कौन सा ठीक है ... मैं कैसे आवश्यक रूप में शीर्ष पर तीर ला सकता है? ... और मामलों div को overlaying? ... धन्यवाद।

Answer 1

आप पार ब्राउज़र संगतता के लिए परवाह नहीं है, तो आप एक छद्म तत्व है कि आप 45 डिग्री से बारी बारी से उपयोग करें और यह करने के लिए शैलियों संलग्न कर सकते हैं। केवल एक चीज आप अतिरिक्त जरूरत पृष्ठभूमि होगा, घुमाया (पीछे) 45deg द्वारा छद्म तत्व को संलग्न करने के लिए:

div.coolarrow:before { 
    content: ''; 
    position: absolute; 
    z-index: -1; 
    top: -24.7px; 
    left: 10px; 
    background-color: #bada55; 
    width: 50px; 
    height: 50px; 

    background: url(url/to/your/45deg/rotated/background.gif); 

    box-shadow: inset 0 0 10px #000000; 
    transform: rotate(45deg); 
} 

यहाँ (पृष्ठभूमि के बिना) वर्णन करने के लिए एक छोटी बेला है:
Fiddle

अन्य मामलों के लिए इसे काम करने के लिए, लेकिन 90 डिग्री तीर, आपको रेक्ट अतिरिक्तता को छोड़ना होगा। और मैं वास्तव में पता नहीं क्या तो पृष्ठभूमि छवि के साथ होता है ...

Answer 2

छवि को एक div के लिए पृष्ठभूमि के रूप में रखें, और बार पर इसे ओवरले बनाने के लिए मार्जिन के लिए नकारात्मक मान डालें। उदाहरण (हालांकि अनुमान लगाया गया है, मैं इसे काम करने का दावा नहीं करता) मार्जिन-बाएं होगा: -20 पीएक्स; मार्जिन टॉप: -20 पीएक्स; और लाइन के बाद यह है।

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

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin-left: -20px; margin-top: -20px; } 

Answer 3

http://apps.eky.hk/css-triangle-generator/ पर जाना है और इसे उत्पन्न: डी

या

#triangle { 
    width: 0; 
    height: 0; 
    border-bottom: 120px solid green; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
}