블록의 상위 25 % 만 표시합니다.

css3을 사용하여 생성 된 특정 모양이 있습니다. 블록의 일부분 (예 : 위 25 % 또는 아래 25 %) 만 표시하고 싶습니다. 이것을 어떻게 성취합니까?블록의 상위 25 % 만 표시합니다.

예 : In http://jsfiddle.net/HNyHM/1/; 위에서 25 % 만 표시하고 싶습니다.

2012-04-26 user0101

div 안에 CSS 모양을 감싸고 모양을 표시 할 높이와 너비를 정확히 지정하십시오. 그런 다음 래퍼에 대해 절대적으로 모양을 배치합니다.

다음은 내가 바이올린에서 사용한 것입니다.

.shape-wrapper { 
     position:relative; 
     overflow:hidden 
     height: 25px; 
    } 



    .shape-wrapper > div { 
     top: -25px; 
     left: -25px; 
    }

당신은 JS를 사용하여 요청하는 것처럼 자식 DIV (상위 25 % 또는 하단 25 %의 위치 변경에 유지할 수 있습니다.

출처

2012-04-26 08:08:00

당신은 단순히 상단 : -25px와 왼쪽 : -25px를 사용하여 블록을 이동합니다. 블록이 가운데에 있고 어떤 구석에도없는 경우 작동하지 않습니다. 다른 해결책? – user0101

모양을 가운데 정렬하는 대신 대신 래퍼를 가운데에 맞출 필요가 있습니다. 그리고 왼쪽 위와 왼쪽으로 px 대신 %를 사용할 수 있습니다. 아직 그것을 얻지 못하면 저에게주세요 당신이 그것이 작동하지 않을 것이라고 생각하는 바이올린 & 나는 당신을 위해 일하게 할 것입니다. –

도움이 될 래퍼 사업부를 추가. 고정과 함께 시작을 http://jsfiddle.net/HNyHM/3/를 참조하십시오 크기 비록.

출처

2012-04-26 08:08:39 Paul

+1 ... 이것은 매우 좋고 솔루션과 매우 유사하지만 높이가 다를 수 있으므로 %로 표시 할 수 있습니까? – user0101

사실상, before : and : after 내용을 회전 시키면 비율이 다소 어렵습니다. 그 다음 그림의 실제 높이는 (사) 사인 함수를 사용하여 계산됩니다. – Paul

블록의 상위 25 % 만 표시합니다.

답변

관련 문제