CSS에서 div를 하트로 설정하는 방법

CSS를 사용하여 div를 하트로 설정하는 방법: 먼저 HTML 샘플 파일을 만든 다음 dom 요소를 준비하고 해당 ID를 하트로 할당한 다음 마지막으로 의사 요소를 작동하고 내용을 하트로 회전합니다. 모양 그게 다야.

이 글의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

CSS를 사용하여 하트 모양 그리기

좋아요 및 취소와 같은 하트 모양 패턴을 자주 접합니다. 시나리오. 이전 사용 방법은 img 또는 backgroundImage로 DOM에 삽입된 이미지 액세스였습니다. 이제 CSS를 사용하여 하트 모양 패턴을 직접 그려보세요.

하트 모양

dom 요소를 다음과 같이 준비하고 id 값을 heart에 할당합니다

<div id="heart"></div>

너비와 높이를 추가합니다

#heart {
    position: relative;
    width:50px;
    height:40px;
}

이제 너비가 50px이고 높이가 40px인 직사각형이어야 합니다. 더 이상 실행되지 않습니다. 이제 의사 요소 조작을 시작하겠습니다

/*上一步骤的代码省略...*/
#heart:before,
#heart:after{
  position: absolute;
  left:0;
  top:0;
  content: '';
  width: 25px;
  height: 40px;
  background: red;
  border-radius: 20px 20px 0 0;
}
#heart:after {
  content: '';
  left: 25px;
  top:0
}

emm... 모양은 설명할 수 없습니다. 위 그림을 보면 됩니다... 지금까지의 모양은 다음과 같아야 합니다.

다음으로 할 일은 전후 콘텐츠를 회전시키는 것입니다. 코드는 다음과 같습니다.

#heart:before,
#heart:after{
  position: absolute;
  left:25px;
  top:0;
  content: '';
  width: 25px;
  height: 40px;
  background: red;
  border-radius: 40px 40px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart:after {
  content: '';
  left: 0;
  top:0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

위 그림...

[추천 학습: css 비디오 튜토리얼]

위 내용은 CSS에서 div를 하트로 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!