vertical percentage bar 바닥부터 채우기

세로로 된 퍼센테이지 바를 만들기위해서 아래와 같이 구조를 만들었다.

그런데 내부 퍼센테이지에 따라 채워져야하는 바가 위에서부터 채워지는 문제가 생겼다.

이미지 스프라이팅을 하고 있었기 때문에 이미지에 absolute와 cover를 사용해서 강제로 bottom:0을 만드는 것은 할 수 없었다.

 

<IconSet.GrayBar space="8.3px auto 10px" type="person">
      <TourIconSet.GreenBar type="person" percent={percent} />  
</IconSet.GrayBar>

 

사람모양이어서 사진의 바닥에서부터 퍼센테이지에 따라 그림에 맞춰 바닥부터 올라왔어야 했기에 어떻게 하면 좋을지 검색해도 원하는 부분은 안나왔다.

 

결론적으로 flex와 background-position-y를 통해 해결했다.

 

/* 상위 컴포넌트 */
const GrayBar = styled.span`
	background: url(..) no-repeat;
	background-position: <x위치> <y위치>;
    width: <x>;
    height: <y>;
    
    display: flex;
    align-item: end;
`;

/* 하위 컴포넌트 */
const GreenBar = styled.sapn<{percent: string}>`
    width: 100%;
    background-position: <x위치> <y위치>;
    display: <block || inline-block>;
    ...
    background-position: bottom;
    ${({ percent }) => `height: ${percent}%;`}
`;

 

 

https://stackoverflow.com/questions/24884574/css-height-percentage-filling-from-bottom-to-top

CSS height percentage filling from bottom to top