CSS 각면의 높이가 다른 테두리

Question

순수한 CSS에서는이 경계선이 가능할 지 궁금합니다. 이 상자에는 내용이없고 미래의 이미지 만있을 것입니다.

나는 어떤 jQuery를 함께 순수 CSS에서이를 싶습니다. 주변을 둘러 보았지만 실제로는 불가능한 것처럼 보였습니다. CSS가 계속 진화하면서 중첩 된 div 등을 사용할 수 있는지 궁금합니다.

건배!

Answer 1

가짜로 만들 수 있습니다. 이처럼 jsFiddle example.

HTML

<div id="wrapper"> 
    <div id="top"></div> 
    <div id="bottom"></div> 
    <img src="http://www.placekitten.com/200/100" /> 
</div> 

CSS 바로이 '생각'그것을, 당신은 또한 단지 사업부의 오른쪽 하단에 작은 그래픽을 스틱 수에 대한

#top, #bottom { 
    width: 200px; 
    height:50px; 
    position:absolute; 
    left:-1px; 
} 
#bottom { 
    border-left: 1px solid #f00; 
    border-right: 1px solid #f00; 
    border-bottom: 1px solid #f00; 
    bottom:0; 
} 
#top { 
    border-left: 1px solid #f00; 
    top:0; 
} 
#wrapper { 
    position:relative; 
    width: 200px; 
    height:100px; 
    background: #faa; 
} 

Answer 2

(로 배경 이미지) 왼쪽과 아래쪽에 테두리를 사용합니다. 하나의 작은 그래픽으로 CSS를 통해 조작하지만 적어도 높이와 너비는 동적이며 전체 이미지를 사용하는 것처럼 붙어 있지 않습니다.

많은 마크 업과 CSS를 피할 수도 있습니다. 1 div, 1 css 선언 및 1 작은 이미지.

Answer 3

가상 요소를 사용하는 경우 div가 하나만 있으면됩니다. jsFiddle here

HTML :

CSS

<div id="wrapper"> 
    <img src="http://www.placekitten.com/200/100" /> 
</div> 

: 당신은 단지 1 개 사업부를 원하는 당신은 의미

#wrapper { 
    position:relative; 
    width: 200px; 
    height:100px; 
    background: #faa; 
    border-left: 1px solid #f00; 
    border-bottom: 1px solid #f00; 
} 
#wrapper::before { 
    content: " "; 
    position: absolute; 
    width: 100%; 
    height: 50%; 
    bottom: -1px; 
    right: -1px; 
    border-right: 1px solid #f00; 
    border-bottom: 1px solid #f00; 
}