फ्लैट तेज कोने या बेवल वाले कोनों

Question

क्या सीएसएस और एचटीएमएल के साथ एक तेज फ्लैट कोने बनाने का कोई तरीका है?

कुछ इस तरह:

____ 
/ \ 
| | 
\____/ 

Answer 1

यहाँ मेरी समाधान है, क्रिस Coyier से सीएसएस आकार का उपयोग करते।

http://jsfiddle.net/dDejan/XSs9L/

4 अतिरिक्त divs अपने कंटेनर है कि आप इस तरह से आकार का चाहते से प्रत्येक के लिए जावास्क्रिप्ट (अच्छी तरह से, jQuery वास्तव में) के माध्यम से डाला जाता है। इन divs यह माता पिता है के कोनों में पूरी तरह से तैनात कर रहे हैं, और वे तदनुसार स्टाइल लिंक स्वेन BIEDER

Answer 2

आप इस CSS triangles तकनीक का उपयोग बिल्कुल-तैनात :before और :after तत्वों का उपयोग कर रचना कर सकते हैं।

<div class="box"></div> 

सीएसएस: यहाँ

.box { 
    background-color:#2020ff; 
    height:50px; 
    width:50px; 
    position:relative 
} 

.box:after { 
    content:" "; 
    width: 0; 
    height: 0; 
    border-top: 10px solid #ffffff; 
    border-bottom: 10px solid transparent; 
    border-right:10px solid #ffffff; 
    position:absolute; 
    top:-9px; 
    right:0px; 

} 

Answer 3

देखो। वहाँ आप सभी की जरूरत है:

http://css-tricks.com/examples/ShapesOfCSS/

संपादित मामले में कड़ी खो जाता है:

सीएसएस

#octagon { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position: relative; 
} 

#octagon:before { 
    content: ""; 
    position: absolute; 
    top: 0; left: 0; 
    border-bottom: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; height: 0; 
} 

#octagon:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    border-top: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; 
    height: 0; 
} 

Answer 4

box { 
 
    background-color: transparent; 
 
    position: fixed; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
svg { 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
polygon { 
 
    visibility: visible; 
 
    background: black; 
 
    stroke: white; 
 
}

<box> 
 
    <svg> 
 
    <polygon points="0 250, 50 300, 300 300, 300 50, 250 0, 0 0" /> 
 
    </svg> 
 
</box>