순수 CSS로 간단한 버블 대화 상자 만들기(그림과 텍스트가 포함된 자세한 설명)

이 문서에서는 순수 CSS를 사용하여 간단한 버블 대화 상자를 만드는 방법을 단계별로 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

풍선 상자 이미지를 직접 삽입할 수도 있지만 매번 이미지를 로드해야 하는데 CSS를 사용하면 가능합니다!

먼저 버블박스가 어떻게 구현되는지 이해해야 합니다. 원리를 알면 무한히 유연해질 수 있어요! ! ! !

기본 버블 다이어그램부터 시작해 보세요!

첫 번째 단계는 액자를 만드는 것입니다! 매우 간단합니다. div만 있으면 됩니다! 그런 다음 해당 div에 대한 상대 위치를 설정합니다.

HTML:

	<div class="div"></div>

CSS:

.div{
    width: 200px;
    height: 100px;
    border: 2px solid #ff0;
    position: relative;
	}

사진과 같이 박스 형태로 기본 형태는 그대로 있습니다!

그럼 가장 중요한 것은 삼각형 부분을 어떻게 구현하느냐 입니다~

그 전에 먼저 이해해야 할 것은 삼각형은 어디서 오는 걸까요?

여기서 분석할 수 있는 예를 들어보겠습니다! ! ! !

아래 사진을 살펴보겠습니다. 한걸음씩 오세요! ! !

HTML:

<p>1.下面是一个div.长宽为50*50的正方形，边框宽度为50</p>
<div class="div1"></div>

CSS:

		.div1{
			width: 50px;
			height: 50px;
			border: 50px solid;
			border-color: yellow skyblue pink deeppink;
		}

Rendering: 테두리가 50px이면 이미 사다리꼴이라는 것을 알 수 있죠?

다음으로 정사각형의 너비와 높이를 0으로 설정하고 50px 테두리만 남겨두고 렌더링을 살펴보겠습니다. 예, 프레임은 더 이상 아무것도 감싸지 않습니다. 테두리 자체만 남습니다.

상단 테두리를 취하고 나머지 3면의 색상을 투명하게 설정했습니다!

삼각형이 어디서 나오는지 아시나요?

다시 버블 프레임으로 돌아가서 직사각형 프레임 아래에 삼각형만 배치하면 기본적으로 버블 프레임이 형성됩니다! !

CSS: div 앞에 이 스타일을 삽입하세요! ::before를 사용하면 괜찮습니다!!! 절대적으로 위치를 지정하세요! 위쪽 테두리 색상을 #ff0으로 설정하고 왼쪽 및 오른쪽 테두리를 투명색으로 설정하고 아래쪽 테두리를 투명색으로 설정합니다

		.div::before{
			content: '';
			width: 0;
			height: 0;
			border: 20px solid;
			position: absolute;
			bottom: -40px;
			left: 140px;
			border-color:  #ff0 transparent transparent;
		}

결과 사진:

자 대략적인 윤곽선이 생겼습니다. 어! ! ! 조금 더 나쁜 것 아닌가요? 오! 삼각형은 속이 빈 삼각형이 아니라 속이 빈 삼각형이어야 한다는 것이 밝혀졌습니다! ! 그렇다면 배경색이 흰색인 div 요소 뒤에 같은 삼각형을 삽입하고 원래의 노란색 삼각형으로 덮어주면 충분하지 않을까요? 좋아, 한번 살펴보자! ! !

CSS:

		.div::after{
			content: '';
			width: 0;
			height: 0;
			border: 20px solid;
			position: absolute;
			bottom: -36px;
			left: 140px;
			border-color:  #fff transparent transparent;
		}

Rendering:

완성 후 조금 갑작스럽다면 버블박스에 둥근 모서리를 추가해주세요! ! !

css:

.div{
			width: 200px;
			height: 100px;
			border: 2px  solid #ff0;
			border-radius: 7px;  /*圆角弧度为7px*/
			position: relative;
		}

색상이 채워진 버블 상자를 직접 설정할 수도 있습니다! ! ! 매우 간단하며 코딩이 필요하지 않습니다! !

알겠습니다. 끝났습니다! 기본 버블박스 완성! ! ! !

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 순수 CSS로 간단한 버블 대화 상자 만들기(그림과 텍스트가 포함된 자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!