तिरछी एज बटन

Question

मैं बटन है कि इस तरह दिखना का निर्माण करने की कोशिश कर रहा हूँ:

मैं इस का उपयोग कर :after और CSS triangles पूरा कर सकते हैं, लेकिन मैं चर ऊंचाई तत्वों के साथ काम कर रहा है कि नहीं कर सकते। क्या इसे पूरा करने और परिवर्तनीय ऊंचाई रखने का कोई तरीका है?

फिडल: http://jsfiddle.net/AaP47/2/

Answer 1

आप इस मामले में एक विषम div इस्तेमाल कर सकते हैं। यहां एकमात्र मुद्दा यह है कि चूंकि आपके बटन लम्बे हो जाते हैं, क्योंकि स्काई के कारण, वे थोड़ा अधिक हो जाएंगे। यदि आप केवल 1 या 2 लाइनों से निपट रहे हैं तो यह कोई मुद्दा नहीं हो सकता है। अगर वे बहुत लंबा इसे काफ़ी एक जैसे नहीं करने के लिए चीजों का कारण हो सकता:

http://jsfiddle.net/AaP47/3/

.button.triangle:after { 
    content: ""; 
    background-color: red; 
    display: block; 
    height: 100%; 
    position: absolute; 
    right: -30px; 
    top: 0; 
    width: 60px; 
    transform: skewX(-10deg); 
} 

यह भी पूरी तरह से स्केलेबल नहीं है। आपको उस सबसे बड़ी ऊंचाई पर निर्णय लेने की आवश्यकता होगी जिसे आप समर्थन और समायोजन के अनुसार समायोजित करना चाहते हैं। जितना लंबा आपको समर्थन करने की ज़रूरत है, उतना ही चौंका देने वाला div होना चाहिए।

परिणाम (लाल के बिना): http://jsfiddle.net/AaP47/4/

Answer 2

सिर्फ इसलिए कि मैं एक अलग दिशा में मज़ा फेरबदल था और एक विकल्प अवधारणा भले ही आप जाहिरा तौर पर पहले से ही एक जवाब मिला की पेशकश करने के लिए;

a { 
    padding-right: 20px; 
    padding-left: 20px; 
    text-decoration: none; 
    color: white; 
    font-weight: bold; 
    display: inline-block;  
    border-right: 30px solid transparent; 
    border-top: 50px solid #4c4c4c;  
    height: 0; 
    line-height: 20px; 
} 
a p {margin-top: -45px;} 

और;

<a href="#"> 
    <p>this is a triangle button<br/> 
     with multiple lines!</p> 
</a> 

jfiddle: http://jsfiddle.net/AaP47/6/

चीयर्स!