CSS로 체크 표시 효과를 얻는 방법

체크 표시 효과를 얻으려면 미리 만들어진 기호를 사용하여 인터넷에서 √를 직접 검색하고 페이지에 삽입하는 아이디어가 있습니다. 이 글에서 소개하는 또 다른 아이디어는 CSS를 사용하는 것입니다.

(관련 권장 사항: css 비디오 튜토리얼)

블록 수준 요소의 너비와 높이를 설정합니다.

요소의 두 개의 인접한 테두리를 설정합니다.

요소 회전

HTML

<div class="check-style-unequal-width"></div>

분석:

여기서 블록 수준 요소를 사용해야 합니다.

요소 콘텐츠를 설정할 필요가 없습니다.

CSS

.check-style-unequal-width {
 
    width: 8px;
 
    height: 16px;
 
    border-color: #009933;
 
    border-style: solid;
 
    border-width: 0 3px 5px 0;
 
    transform: rotate(45deg);
 
}

분석:

직사각형을 얻으려면 너비와 높이를 설정하세요. 효과가 있고 직사각형은 내용 없음

인접 테두리의 스타일을 설정하고 체크 표시의 일반적인 윤곽을 얻습니다

회전 속성을 사용하여 체크 표시를 성공적으로 얻었습니다

작동 효과

분석:

위 그림과 같이 첫 번째는 두 줄의 체크 표시 효과입니다. 두 번째는 너비가 같은 두 줄의 체크 표시 효과이고, 세 번째는 두 줄의 체크 표시 효과입니다. 폭과 길이가 같은 선. 자세한 구현은 소스코드 확인을 참고하시기 바랍니다.

참고:

행 수준 요소의 너비와 높이를 직접 설정하는 것은 쓸모가 없습니다. 이를 블록 수준 요소로 만들려면 표시를 설정해야 합니다. 예를 들어, 이 예제에 적합하려면 스팬이 디스플레이를 인라인 블록으로 설정해야 합니다.

실제 필요에 따라 요소 너비와 높이를 조정할 수 있습니다.

실제 필요에 따라 너비뿐만 아니라 너비도 다르게 설정할 수 있습니다. of 인접 테두리

이 효과를 얻을 수 있습니다. 의사 요소 ::before 및 ::after에 작동하는 간단한 변경을 수행합니다. ::before & ::after

추천 튜토리얼: CSS 튜토리얼

을 참조하세요.

위 내용은 CSS로 체크 표시 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!