HTML/CSS를 사용하는 상자가 오른쪽 상단에 열립니까?

Question

"border-top, left, right, bottom"스타일 속성을 가진 div가 있습니다. 그러나 경계 상단에 상자를 완성하는 것을 원하지 않습니다 (직사각형). 오른쪽 상단 (상자의 길이쪽에 있음)에 작은 (약 2-3px) 여는 것을 원합니다.

어떻게이 작업을 수행 할 수 있습니까?

CSS에는 "border-top-width"라는 속성이 있지만 "border-top-length"가 없다고 생각합니다.

CSS를 사용하여 완료 할 수 있습니까? 다른 방법도 환영합니다.

는

감사합니다 ... 나는 그게 가능하다고 생각하지 않습니다

Answer 1

는 ... 내가 생각할 수있는 유일한 방법은 마우스 오른쪽 플로트 (1 픽셀의 폭 3px의 높은) 그 안에 다른 요소를 만들어 그것을 해킹하는 것입니다

#borderHack { 
    float: right; 
    margin-right: 1px; 
    background-color: white; /*This would have to be the same as the background*/ 
    height: 3px; 
    width: 1px; 
} 

Answer 2

당신은 누구에게도 국경 탑을 설정 한 다음 해당 컨테이너에 다른 DIV를 넣어해야합니다 : 다음

<div style="border:1px solid black; background-color: white;"> 
    <div id="borderHack"></div> 
    Your content here 
</div> 

그리고 스타일

이 요소 때문에 등 "해킹"... margin-right: -1px 할 DIV. 그런 다음 내부 DIV의 border-top을 설정하고 너비를 컨테이너의 너비보다 작게 설정하십시오.

Answer 3

나는 당신이 혼자 CSS로 이것을 할 수 있다고 생각하지 않습니다.

개구부에 원하는 색상의 배경색을 가진 내부 div를 추가 할 수 있습니다. 그런 다음 내부 요소를 위치시키고 크기를 조정하여 틈이있는 것처럼 보입니다.

Answer 4

당신은 어떻게 할 것인지 http://www.css3.info/preview/border-image/

기본적으로이 링크에 설명 무엇을 사용하면 상단 모서리없이 상자를 그립니다 및 테두리 이미지로

편집을 할당이라고 할 수

:를하지만이는 CSS3에서만 사용 가능하며 많은 브라우저에서 구현되지 않았기 때문에 이제는 다른 해결책이 실용적인 해결책을 제시합니다.

Answer 5

당신은뿐만 아니라 플로트와 거의 같은이 (상대 + 절대 위치)을 시도 할 수 있습니다 :

<div style="width:400px;height:300px;border-top:1px solid black; border-right:1px solid black;border-bottom:1px solid black;position:relative;"> 
    some content here 
    <div style="width:2px;height:3px;position:absolute;right:0;background:gray;"></div> 
</div>