सीमा त्रिज्या और त्रिकोण पक्ष के साथ सीएसएस आइटम

Question

क्या यह सीएसएस (छवियों के बिना) में सीमा त्रिज्या और त्रिभुज पक्ष के साथ आइटम बना सकता है? एक सवाल ही नहीं है, http://jonrohan.me/guide/css/creating-triangles-in-css/

गतिशील ऊंचाई के लिए

और यहाँ का जवाब: http://css-tricks.com/snippets/css/css-triangle/ या इस:

Answer 1

आप एक एसवीजी छवि है कि किसी भी आकार में तेजी से प्रस्तुत करना होगा और तत्व के आकार के लिए अनुकूल होगा उपयोग कर सकते हैं, यह इस प्रकार दिखाई देगा ...

.button { 
    background: #000; 
    float: left; 
    position: relative; 
    color: #999; 
    font: 15px/130% Arial, sans-serif; 
    padding: 10px 20px; 
    clear: both; 
    margin: 10px; 
    border-radius: 5px 0 0 5px; 
} 

.button:after { 
    content: ''; 
    display: block; 
    width: 10px; 
    position: absolute; 
    right: -10px; 
    height: 100%; 
    top: 0; 
    background: transparent url('triangle.svg') 0 0 no-repeat; 
} 

http://jsfiddle.net/Ch7aA/

यह jsfiddle केवल होगा वेबकिट में काम करें क्योंकि मैंने svg को रेखांकित किया है ताकि आप समझ सकें कि यह कैसे काम करता है, लेकिन यदि आप इसे बाहरी फ़ाइल से लोड करते हैं तो इसे ठीक काम करना चाहिए। यहाँ संदर्भ के लिए प्रतिपादन है:

Answer 2

इस पर एक नजर है CSS triangle with dynamic height

Answer 3

HTML:

<div><span>fubar</span></div> 

सीएसएस:

span{ 
    display:block; 
    width:100px; 
    float:left; 
    background-color:green; 
    text-align:center; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    padding:5px 0; 
} 
div:after { 
    content: ""; 
    display:block; 
    float:left; 
    border-top: 15px solid transparent; 
    border-bottom:15px solid transparent; 
    border-left: 10px solid green; 
} 

jsFiddle Demo

---

अद्यतन:

अलग ऊंचाइयों आप या तो गतिशील रूप से कुछ जावा स्क्रिप्ट कोड को लिखने की ज़रूरत जा रहे हैं संभालने के लिए सक्षम होने के लिए सीमा का आकार बदलें या सीएसएस का उपयोग कर पाठ को छोटा करें। हालांकि, यह आपकी विशेष आवश्यकताओं पर निर्भर करता है।