[CSS, HTML] 별점 모양

star_bar.svg

0.01MB

css와 HTML 코드만 사용해 별점 표시 모양을 만들기
점수를 %로 입력하면 너비로 환산해서 표기

HTML

아래 width 부분에 별점을 줄 점수 비율을 입력해주면 된다

<div class="stararea">
    <span class="starpoint" style="width: 53%;" />
</div>

CSS

.stararea {
    width: 100px;
    height: 20px;
    margin: 0 auto 10px;
    position: relative;
}

.stararea span {
    width: 20%;
    background-color: #f8a504;
    height: 20px;
    display: block;
    position: relative;
    z-index: 1;
}

.stararea::after {
    width: 100px;
    height: 20px;
    background: url(/src/lib/img/star_bar.svg) no-repeat;
    background-size: 100%;
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

 

첨부한 svg 파일을 다운로드받고, background 경로를 맞춰주면 별점이 아래처럼 표시된다