>  기사  >  웹 프론트엔드  >  CSS는 숫자 레이블 스타일을 구현합니다.

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

韦小宝
韦小宝원래의
2018-03-14 12:48:197227검색

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

CSS 순위 라벨 스타일 구현


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

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

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

  • 초기 구현 방법(실패)

  • 후속 구현 방법(성공)

  • 원래 웹 페이지 구현 방법

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

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

여기서 문제는 삼각형이 뒤에 있는 그림을 덮을 것이라는 점을 발견했습니다. 이상해 보입니다. 그래서 가장 먼저 떠오르는 해결책은 CSS는 숫자 레이블 스타일을 구현합니다.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를 사용하여 이러한 그래픽을 작성할 때 일반적으로 두 가지 이상의 방법이 있으므로 구현 방법에 대해 더 많이 생각해야 합니다.

CSS는 숫자 레이블 스타일을 구현합니다.
3. 원본 웹페이지 구현

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

관련 추천:

css

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

css

3 Shadow

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.