CSS에서 하트 모양을 얻는 방법-CSS 튜토리얼-php.cn

CSS에서 하트 모양을 얻는 방법

青灯夜游

풀어 주다： 2023-01-07 11:45:06

원래의

5099명이 탐색했습니다.

CSS에서 하트 모양을 구현하는 방법: 먼저 "border-radius:100%" 스타일을 사용하여 두 개의 완벽한 원을 그린 다음 두 개의 원이 부분적으로 겹치도록 배치한 다음 사각형을 그리고 배치합니다. 두 개의 원이 있는 정사각형. 원이 부분적으로 겹쳐서 기울어진 하트 모양을 형성합니다. 마지막으로 변환 스타일을 사용하여 하트의 각도를 조정합니다.

CSS에서 하트 모양을 얻는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

기본 지식:

사각형을 그리는 방법을 이해하세요.
원을 그리는 방법을 이해하세요.
포지셔닝이 무엇인지 이해하세요.
회전 방법을 이해하세요.

더 이상 고민하지 말고 먼저 CSS를 사용하여 원을 그리는 방법을 가르쳐 드리겠습니다.

.disc1{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:300px 0px 0px 300px;
    border-radius:100%;
    float:left;
}

로그인 후 복사

CSS에서 하트 모양을 얻는 방법

우리의 마음은 두 개의 원과 하나의 사각형으로 구성되어 있기 때문에 또 다른 원이 필요합니다.

.disc2{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:250px 0px 0px 0px;
    border-radius:100%;
    float:left;
    position: relative;
    right: 50px;
}

로그인 후 복사

CSS에서 하트 모양을 얻는 방법

세 번째 단계에서는 정사각형을 만들어야 합니다.

.square{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin: 300px 0px 0px 0px;
    float: left;
    position: relative;
    right: 152px;
}

로그인 후 복사

2-CSS에서 하트 모양을 얻는 방법

이렇게 하면 기본적으로 효과가 나왔지만 아직 사랑의 각도를 조정해야 합니다. 이때 CSS 스타일의 변환에서 회전 속성을 사용해야 합니다.

세 개의 div를 모두 회전해야 하므로 이 세 개의 div를 하나의 div에 넣습니다. 구체적인 코드는 다음과 같습니다.

.main{
    transform: rotate(45deg);
    margin: 300px;
}

로그인 후 복사

이제 우리의 사랑은 이루어졌습니다. 렌더링은 다음과 같습니다.

CSS에서 하트 모양을 얻는 방법

모든 코드는 다음과 같습니다(HTML 코드 및 CSS 코드 포함)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
			*{
			    margin: 0px;
			    padding: 0px;
			}
			.main{
			    transform: rotate(45deg);
			    margin: 300px;
			}
			.disc1{
			    width: 100px;
			    height: 100px;
			    border:1px solid red;
			    background-color: red;
			    margin:300px 0px 0px 300px;
			    border-radius:100%;
			    float:left;
			}
			.disc2{
			    width: 100px;
			    height: 100px;
			    border:1px solid red;
			    background-color: red;
			    margin:250px 0px 0px 0px;
			    border-radius:100%;
			    float:left;
			    position: relative;
			    right: 50px;
			}
			.square{
			    width: 100px;
			    height: 100px;
			    border:1px solid red;
			    background-color: red;
			    margin: 300px 0px 0px 0px;
			    float: left;
			    position: relative;
			    right: 152px;
			}
		</style>
    </head>
    <body>
        <div class="main">
            <div class="disc1"></div>
            <div class="disc2"></div>
            <div class="square"></div>
        </div>
    </body>
</html>

로그인 후 복사

(학습 영상 공유: css 영상 튜토리얼)

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