CSS 테두리 모양 - 오른쪽 상단 모서리를 자르는 방법

Question

모양 테두리와 같은 탭을 만드는 방법은 궁금합니다. 더 명확히하려면 별표 모양을 그려야합니다. 이 경계선 모양을 의미합니다.

********************* 
*********************** 
************************* 
*************************** 
*************************** 
*************************** 
*************************** 
*************************** 

이렇게하면 CSS가 직사각형 오른쪽 위 모서리를 어떻게 잘라 버리나요? 또는 더 최적의 방법은 무엇입니까?

Answer 1

테두리를 사용하면 이와 비슷한 효과를 얻을 수 있습니다. jsfiddle 순수한 CSS를 고집하는 경우 가장 좋은 대답은 아니지만 시작점 일 수 있습니다.

편집 : 여기 JsFiddle Demo

업데이트 마크 업

<div> 
<div class="wrapper inner"> 
    <div class="abc"></div> 
    <div class="container">I AM A TAB<div> 
</div> 
<div class="border inner"> 
    <div class="ab"></div> 
    <div class="bcontainer"><div> 
</div> 
</div> 

CSS

.inner{position:fixed;} 


.border{width:72px;height:52px;z-index:-1;top:0px;} 


.wrapper{width:70px;top:1px;left:1px;} 


.container {background:rgb(226,226,226);text-align:center;} 

.bcontainer{background:black;width:71px;height:41px;} 
.abc { 
    width: 60px; 
    border-bottom: 10px solid rgb(226,226,226); 
    border-right: 10px solid transparent; 
} 

.ab{ width: 61px; 
    border-bottom: 11px solid black; 
    border-right: 10px solid transparent;}​ 

Answer 2

CSS는 비 정사각형, 둥근이 아닌 테두리 모양을 지원하지 않습니다. 계단식 너비 또는 이미지가있는 DIV를 사용할 수 있지만 CSS만으로는 도움이되지 않습니다.

번갈아 가며 CSS triangles을 오버레이 해 볼 수는 있지만 해킹 비트입니다.

Answer 3

당신이 사용할 수있는 CSS3 border-radius 특성 : http://www.w3schools.com/cssref/css3_pr_border-radius.asp (example)

그 모서리가 둥글게 될 수 있다면

Answer 4

이 border-radius는 당신이 필요로하는 모든 아마도 : http://border-radius.com/

코너는 각도 수있는 경우 ' 꽤 지저분한 HTML이 없으면 그것을 얻지 못할 것입니다. 그것을 할 표준 재산이 없다. 가장 좋은 방법은 테두리의 특정 부분을 이미지로 만든 다음 background-image 및 background-position을 사용하여 상단 구석에 배치하는 것입니다.

Answer 5

border-corner-shape CSS 속성을 사용하면 CSS3에 구현 된 트릭을 수행 할 수있었습니다! CSS4 초안에서 제안되었지만 - 농담이 아닙니다!

구현은 확실하지 않지만 지원이 필요합니다. 읽기 : http://lea.verou.me/2013/03/border-corner-shape-is-in-danger-and-you-can-help/