모서리가 두 개인 모서리로 만들기

Question

내 웹 사이트의 모서리 2 개로 경계를 만들고 싶습니다. 다른 div 크기에이 경계선이 필요합니다.

한 시간 정도 지나면 고정 된 크기의 200px로 작동하게되었습니다. 그러나 나는 이것이 어떻게 유연하게 할 수 있는지 모른다.

여기

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

누구나 더 나은 해결책을 알고있는 Demo

HTML

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

CSS입니까? 감사합니다

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