CSS 사다리꼴에 텍스트 배치

Question

나는 재 작성을위한 레거시 응용 프로그램을 상속 받았으며 궁금한 문제를 해결했습니다. 테이블의 제목이 마닐라 봉투 탭과 유사한 사다리꼴 모양 안에있는 페이지에 표 형식의 데이터가 표시됩니다. 이러한 테이블의 맨 아래에는 일반적으로 테이블 제목과 같은 모양이지만 18°으로 회전 된 단추 행이 있습니다. 현재이 효과는 투명한 배경의 절반에 흰색 삼각형이있는 사각형 이미지를 직사각형 모양을 이루는 사각형 블록의 모서리에있는 배경 이미지로 사용하여 제거됩니다. 그러나이 기술은 페이지를 새로 고칠 때 깜박이는 경향이 있습니다.

연습으로 나는 이것을 순수한 CSS 기술로 대체 할 수 있는지 알아보기 위해 노력했습니다. CSS 모양이 다른이 link을 찾았고 필요에 따라 사다리꼴을 에뮬레이트했습니다. 사다리꼴 내에 표 제목 텍스트를 올바르게 배치 할 수 있습니다. 그러나 18° 회전 사다리꼴 모양이 필요할 때 텍스트를 도형 내에 배치 할 수 없습니다. 내 코드는 아래에 포함되어 있으며 여기까지 내가 수행 한 것을 보여주는 jsFiddle이 있습니다. 높이가 0으로 설정되어 있고 테두리 모양을 사용하여 모양을 작성했기 때문에 텍스트가 회전 된 사다리꼴 아래에 표시된다는 것을 이해합니다. 이 기능이 제대로 작동하도록하기 위해 할 수있는 일이 있습니까?

IE8 (및 IE8의 호환 모드 - IE7)에도 표시해야한다는 점에 유의하십시오. 또한 가능한 한 의미 론적으로 유지하기 위해 추가 HTML 요소를 최소한으로 유지하고 싶습니다. div 내에서 스팬을 배치 할 수 있으며 해당 스팬을 절대적으로 배치하여 도형 내에 텍스트를 표시 할 수 있음을 알고 있습니다. 그러나 그렇게하면 사다리꼴의 너비를 수동으로 설정해야하며 너비는 버튼 행에서부터 버튼 행, 나는 그 길을 걷지 않을 것입니다.

감사합니다.

HTML :

<div class="trap">Title Text</div> 
<div class="trap180">Button Row</div>​ 

CSS :

.trap { 
    color: black; 
    font: normal bold 13px Arial; 
    border-bottom: 27px solid #F00; 
    border-right: 27px solid transparent; 
    height: 0px; 
    float: left; 
    line-height: 27px; 
    padding: 0 4px; 
} 

.trap180 { 
    clear: both; 
    color: black; 
    font: normal bold 13px Arial; 
    border-top: 27px solid #F00; 
    border-left: 27px solid transparent; 
    height: 0px; 
    float: right; 
    margin: 20px 0 0 0; 
    line-height: 27px; 
    padding: 0px 4px 0; 
}​ 

Answer 1

그것은 의사 요소 가능합니다. 하지만 테스트 할 오래된 브라우저를 사용할 권한이 없습니다. 당신은 여전히 ​​IE7을 지원해야하는 경우

.trap, .trap180 { 
    color: black; 
    font: normal bold 13px Arial; 
    float: left; 
    line-height: 30px; 
    height: 30px; 
    padding: 0 4px; 
    background: salmon; 
    position: relative; 
} 

.trap180 { 
    float: right; 
    margin: 20px 0 0 0; 
} 

.trap:after,.trap180:after { 
    content: ''; 
    position: absolute; 
    height: 0px; 
    width: 40px; 
    top: 0; 
} 
.trap:after { 
    right: -30px; 
    border-bottom: 30px solid salmon; 
    border-right: 30px solid transparent; 
    z-index: -10; 
} 
.trap180:after { 
    left: -30px; 
    border-top: 30px solid salmon; 
    border-left: 30px solid transparent; 
    z-index: -10; 
} 
​ 

Demo

는 솔직히, 난 그냥 이미지를 사용하거나 약간의 우아한 저하를 허용합니다.