CSS는 숫자 레이블 스타일을 구현합니다.

쇼핑 사이트나 소설 사이트에 접속하면 제품 옆이나 소설 표지 옆에 순위나 인기 표시가 있는 것을 볼 수 있는데, 오늘은 이러한 표시를 어떻게 구현하는지 알아보겠습니다!

CSS 순위 라벨 스타일 구현

　즉,
　

제 구현 프로세스를 주로 다음 단계로 소개합니다.

• 초기 구현 방법(실패)

• 후속 구현 방법(성공)

• 원래 웹 페이지 구현 방법

1. 이 스타일을 보고 가장 먼저 생각한 것은 바로 CSS를 사용할 수 있어야 합니다. 이를 달성하는 방법은 width

및

height가 고정된 빨간색 p와 빨간색 p의 아래쪽 부분을 덮는 흰색 삼각형을 갖는 것입니다. 하지만 최종 효과를 보면 이렇습니다. 　 　

여기서 문제는 삼각형이 뒤에 있는 그림을 덮을 것이라는 점을 발견했습니다. 이상해 보입니다. 그래서 가장 먼저 떠오르는 해결책은 z-index

의 크기를 조정하여 레벨을 변경하는 것입니다. 우선 빨간색 p의 z-index가 그림의 z-index보다 커야 합니다. 삼각형은 그림을 드러낼 수 있지만 빨간색 p를 가릴 수 없어야 합니다. 그래서 이것은 작동하지 않습니다.

2. 그리기 방법 변경

위의 방법으로는 작동하지 않으므로 아래쪽의 흰색 삼각형이 아닌 양쪽의 작은 빨간색 삼각형을 그리면 빨간색의 높이가 줄어드는 것을 알 수 있습니다. p, 그리고 이어붙이시면 위와 같은 스타일이 완성되어 사진이 노출됩니다. CSS 코드의 경우 다음과 같이 변경하면 됩니다.

.trangle {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 10px solid #fff;
}

　다음으로 변경:

.trangle {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 10px solid #fff;
}

　효과가 나타나는 것을 볼 수 있습니다. 따라서 CSS를 사용하여 이러한 그래픽을 작성할 때 일반적으로 두 가지 이상의 방법이 있으므로 구현 방법에 대해 더 많이 생각해야 합니다.

3. 원본 웹페이지 구현

Google F12를 사용하여 원본 웹페이지 구현을 해보니 원본 웹페이지의 순위 라벨이 그림인 것을 발견했습니다...

관련 추천:

css

3 스트립 구현 백분율 효과에 대한 자세한 설명

css

3 Shadow

위 내용은 CSS는 숫자 레이블 스타일을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!