쇼핑 사이트나 소설 사이트에 접속하면 제품 옆이나 소설 표지 옆에 순위나 인기 표시가 있는 것을 볼 수 있는데, 오늘은 이러한 표시를 어떻게 구현하는지 알아보겠습니다!
즉,
제 구현 프로세스를 주로 다음 단계로 소개합니다.
초기 구현 방법(실패)
후속 구현 방법(성공)
원래 웹 페이지 구현 방법
height가 고정된 빨간색 p와 빨간색 p의 아래쪽 부분을 덮는 흰색 삼각형을 갖는 것입니다. 하지만 최종 효과를 보면 이렇습니다.
여기서 문제는 삼각형이 뒤에 있는 그림을 덮을 것이라는 점을 발견했습니다. 이상해 보입니다. 그래서 가장 먼저 떠오르는 해결책은 z-index
.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. 원본 웹페이지 구현
csscss
위 내용은 CSS는 숫자 레이블 스타일을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!