छवि कम शुद्ध सीएसएस तीर टैग

Question

वहाँ छवियों के उपयोग के बिना स्वादिष्ट की तरह "तीर टैग" बनाने के लिए एक तरह से एक रास्ता है:

मैं border-triangle technique से परिचित हूँ, लेकिन नहीं कर सका इसे सभ्य दिखने के लिए प्राप्त करें (भाग में क्योंकि हमें पूरे घटक को फ्रेम करने के लिए अतिरिक्त बाहरी सीमा की आवश्यकता होगी)।

Answer 1

मैं थोड़ा उदाहरण बना सकता हूं जो आप चाहते हैं।

सीएसएस

div{ 
    padding:5px 10px; 
    font-size:12px; 
    -moz-border-radius:0 5px 5px 0; 
    -webkit-border-radius:0 5px 5px 0; 
    float:left; 
    margin-left:30px; 
    margin-top:20px; 
    position:relative; 
    font-family:verdana; 
    color:#3b3d3c; 
    border:1px solid #d5d5d7; 
    border-left:0; 
} 

div{ 
    background: -moz-linear-gradient(top , #fbfdfc 0%,#f6f5f5 100%); 
    background: -webkit-linear-gradient(top , #fbfdfc 0%,#f6f5f5 100%); 
} 

div:after{ 
    content:""; 
    width:18px; 
    height:18px; 
    background: -moz-linear-gradient(left top , #fbfdfc 0%,#f6f5f5 100%); 
    background: -webkit-linear-gradient(left top , #fbfdfc 0%,#f6f5f5 100%); 
    -moz-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    display:block; 
    position:absolute; 
    top:3px; 
    left:-10px; 
    z-index:-1; 
    border:1px solid #d5d5d7; 
} 

चेक इस http://jsfiddle.net/9EEEP/76/

UPDATED अब क्रोम भी

http://jsfiddle.net/9EEEP/77/

में काम करते हैं और अधिक तुम मेरे इस जवाब भी जांच के लिए How to code certain css shapes?

मैं css3 का उपयोग करता हूं जो ब्राउज़र के नीचे IE8 में काम नहीं करता है।