div가 중첩되어 있고 어떻게 올바르게 채울 수 있습니까?

Question

CSS와 HTML로 원하는 레이아웃을 만드는 데 문제가 있습니다.

내가 뭘하려고하는 것은 heading skewed div이고 x 축을 따라 직선 배경이 있습니다. 아래의 이미지와 유사 뭔가 : 당신이 여기에서 볼 수

는 지금까지 내 시도가 쓸데왔다. 바깥 쪽 div의 점의 전체 너비까지 확장하려면 안쪽 div가 필요합니다.

누구든지 아이디어가 있습니까?

Answer 1

이것은 당신이 시작점으로 사용할 수있는 해키 버전입니다 : 당신이 제목 아래 배경을 표시 할 메뉴 뒤에 필요로 그것은 더 복잡

http://jsfiddle.net/32C6E/1/

. 따라서 메뉴 다음에 흰색 막대의 다른 요소가 필요합니다. 나는 흰색 영역을 % 너비로 설정했지만 메뉴가 중복되지 않도록 고정해야합니다.

기본 기술은 skewX에 흰색 영역을 대각선으로 가져오고 h1을 기울여 텍스트가 직선이되게합니다. 그런 다음 요소의 왼쪽을 숨기는 음수 여백을 추가합니다.

header { 
    transform: skewX(-35deg); 
    margin-left: -5em 
} 

header h1 { 
    padding: 4em; 
    -webkit-transform: skewX(35deg); 
} 

그때 절대적으로 그들이 nav의 왼쪽 하단에있는 있도록 메뉴 항목을 놓고 왼쪽 아래에있는 원점 올바른 각도로 회전 할 수 있습니다.

nav li { 

    transform: rotate(-55deg); 
    transform-origin: bottom left; 

    position: absolute; 
    bottom: -2.6em; 
    left: 0em; 
} 

마지막으로 내가 개별적으로 각 메뉴 항목을 선택하고 올바르게 poisition 왼쪽 값에 추가 :

탐색 리 : 첫 번째 항목이 올바른 위치에 때까지 다음 위치에 바이올린을 nth- of-type (2) { 왼쪽 : 2.5em; }

등등 ... 당신은 각 메뉴 항목을 수동으로 배치 할 필요가 없습니다

이상적 메뉴는 문서의 흐름에 보관 될 것이다. 이것은 가능할 수도 있지만 시간이 없어서 살펴보아야합니다. 네가 그걸 만들 수있을거야.

Answer 2

나는 당신에게 border-width 속성을 시도해 볼 것을 제안합니다. 이렇게하면 문제가 해결됩니다.

<div class="abc">&nbsp;</div> 

CSS의 :이 도움이

.abc { 
    width: 200px; 
    height: 0px; 
    border-color: lightgray transparent; 
    border-style: solid; 
    border-width: 350px 350px 0px 0px; 
    position:relative; 
    display:block; 
    margin-left:50px; 
} 

희망 다음은 fiddle

html로입니다.