用两个截止角创建边框

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; 
}