用兩個截止角創建邊框

Question

我想爲我的網站創建一個帶有兩個截止角的邊框。我需要這個邊框爲不同的div大小。

經過一個小時左右，我得到它與一個固定的大小200px的工作。但我不知道如何讓這個靈活。

這裏有一個 Demo

HTML

<div id="outer"><span>Some Text</span></div> 

CSS

body {background: #000;} 

#outer { 
    width: 200px; 
    height: 200px; 
    position: relative; 
    margin: 0 auto; 
    margin-top: 50px; 
    background: #0ff; 
} 

#outer:before { 
    content: ""; 
    height: 200px; 
    left: -15px; 
    position: absolute; 
    border-top: 15px solid transparent; 
    border-right: 15px solid #fff; 
} 

#outer:after { 
    content: ""; 
    width: 200px; 
    height: 200px; 
    top: -15px; 
    right: -215px; 
    position: absolute; 
    border-left: 15px solid #fff; 
    border-bottom: 15px solid transparent; 
} 


#outer span { 
    width: 200px; 
    height: 200px; 
    position: absolute; 
    padding: 50px; 
} 

#outer span:before { 
    display: block; 
    content: ""; 
    width: 200px; 
    top: -15px; 
    left: 0; 
    position: absolute; 
    border-bottom: 15px solid #fff; 
    border-left: 15px solid transparent; 
} 

#outer span:after { 
    display: block; 
    content: ""; 
    width: 200px; 
    height: 200px; 
    top: 200px; 
    left: -15px; 
    position: absolute; 
    border-top: 15px solid #fff; 
    border-right: 15px solid transparent; 
} 

任何人都知道一個更好的解決方案？謝謝

Answer 1

你幾乎擁有它自己。我調整了小提琴的尺寸和位置的百分比值。它仍然是15像素寬的邊框，但：

演示：http://jsfiddle.net/b48AK/show
來源：http://jsfiddle.net/b48AK

body {background: #8aa; padding:0px; margin:0px} 
#outer { 
    background: #bfb; 
    position:relative; 
    margin:15px; 
} 

#outer:before { 
    content: ""; 
    height: 100%; 
    left: -15px; 
    position: absolute; 
    border-top: 15px solid transparent; 
    border-right: 15px solid #fff; 
} 

#outer:after { 
    content: ""; 
    width: 100%; 
    height: 100%; 
    top: -15px; 
    left: 100%; 
    position: absolute; 
    border-left: 15px solid #fff; 
    border-bottom: 15px solid transparent; 
} 

#outer span:before { 
    display: block; 
    content: ""; 
    width: 100%; 
    top: -15px; 
    left: 0; 
    position: absolute; 
    border-bottom: 15px solid #fff; 
    border-left: 15px solid transparent; 
} 

#outer span:after { 
    display: block; 
    content: ""; 
    width: 100%; 
    height: 100%; 
    top: 100%; 
    left: -15px; 
    position: absolute; 
    border-top: 15px solid #fff; 
    border-right: 15px solid transparent; 
}