css 기포 상자 효과 구현(인 스 턴 스 도해 추가)

전제:기포 틀 이나 제시 틀 은 웹 페이지 에서 흔히 볼 수 있 는 것 이다.이 를 실현 하 는 방식 은 매우 많다.우리 가 예전 에 가장 많이 사용 한 것 은 그림 을 자 른 다음 에'포 지 셔 닝'방식 으로 해당 하 는 위 치 를 찾 는 것 이다.그러나 이런 방식 으로 유지 하 는 것 은 매우 번거롭다.예 를 들 어 디자이너 가 다른 색 으로 바 꾸 려 면 우 리 는 다시 그림 을 자 를 수 밖 에 없다.html+css 를 사용 하여 이 효 과 를 실현 하 는 것 을 배 워 보 겠 습 니 다!
다음 효과:
    and  
우 리 는 이러한 효 과 를 실현 하려 면 사각형 과 작은 삼각형 을 제외 하고 삼각형 으로 포 지 셔 닝 하면 된다 는 것 을 분석 할 수 있다.그러면 우 리 는 어떻게 css 를 통 해 작은 삼각형 을 만 들 수 있 을 까?
1:우선 css border 속성 을 살 펴 보 겠 습 니 다.div border-color 를 다른 색 으로 설정 하면 사각형 이 되 어 있 는 것 을 볼 수 있 습 니 다.

<div class="demo"></div>.demo {width:50px;height:50px;border-width:50px;border-style:solid;border-color:#CCC #00F #933 #0C9;}

 그림: 
만약 우리 가 div 의 너비 와 높이 를 계속 0 으로 설정한다 면 사각형 은 삼각형 이 될 것 이다.

.demo{width:0; height:0; border-width:50px; border-style:solid; border-color:#CCC #00F #933 #0C9;} 

 그러나 IE6 아래 는 삼각형 좌우 가 직사각형 상자 입 니 다.다음 과 같 습 니 다.
 
실험 을 통 해 div 의 font-size 와 line-height 를 모두 0 으로 설정 할 때 div 의 사각형 은 IE6 에서 완벽 한 삼각형 을 형성 할 수 있다 는 것 을 발견 했다.코드 는 다음 과 같다.

.demo{width:0; height:0; border-width:50px; border-style:solid; border-color:#CCC #00F #933 #0C9;line-height:0;font-size:0;}

우 리 는 하나의 삼각형 만 필요 하 다 는 것 을 잘 알 고 있 습 니 다.그러면 우 리 는 다른 세 가지 색 채 를 투명 하 게 설정 하거나 배경 색 과 똑 같이 설정 하면 하나의 삼각형 을 만 들 수 있 습 니 다.다른 세 가지 색 채 를 투명 하 게 설정 할 수 있 습 니 다.즉,color 의 값 은 transparent 입 니 다.예 를 들 어 다른 세 가지 색 채 는 페이지 배경 과 마찬가지 로 시각 적 으로 한 개의 삼각형 만 볼 수 있 지만,그러나 배경 색 이 바 뀌 면 다른 세 가지 색 도 달라 진다.다음 코드:

.demo{width:0; height:0; border-width:50px; border-style:solid; border-color:#CCC transparent transparent transparent;line-height:0;font-size:0;}

 그러나 IE6 에 또 문제 가 생 겼 습 니 다.IE6 는 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명 투명

하지만 실험 을 통 해 border-style 을 dashed 로 설정 하면 IE6 의 다른 세 변 은 투명 해 집 니 다!다음 과 같다.

 
아니면 위의 코드 를 다음 과 같이 바 꿉 니까?

.demo{width:0; height:0; border-width:50px; border-style:solid dashed dashed dashed; border-color:#CCC transparent transparent transparent;line-height:0;font-size:0;} 

 이제 우 리 는 작은 삼각형 을 모 의 할 수 있 습 니 다.그러면 다음은 사각형 과 삼각형 을 결합 하여 demo 를 만들어 위의 두 가지 효 과 를 실현 할 수 있 습 니 다!우선 우 리 는 먼저 직사각형 틀 을 설계 한 후에 작은 삼각형 을 직사각형 틀 로 고정 시 켰 다.다음 그림:

코드 는 다음 과 같 습 니 다:

<div class="longen"><span></span>           </div> .longen {position:relative;width:300px;height:100px;border:5px solid red;} .longen span{position:absolute;left:100px;bottom:-40px;border-width:20px;border-style:solid dashed dashed; border-color:red transparent transparent;font-size:0; line-height:0;}

현재 방향 을 가리 키 는 삼각형 화살 표 는 옹 골 진 것 이 고,우리 가 원 하 는 것 은 공심 의 효과 이다.우 리 는 기포 틀 배경 색 과 같은 작은 삼각형 을 다시 겹 쳐 서 이 겹 쳐 진 작은 삼각형 을 위 치 를 이동 하면 도달 할 수 있다.우선 HTML 구 조 를 조정 해 야 한다.다음 과 같다.

 
코드 는 다음 과 같 습 니 다:

<div class="longen"> <span></span> <em></em>            </div> .longen {position:relative;width:300px;height:100px;border:5px solid red;} .longen span{position:absolute;left:100px;bottom:-40px;border-width:20px;border-style:solid dashed dashed; border-color:red transparent transparent;font-size:0; line-height:0;}.longen em{ position:absolute; bottom:-34px; left:100px;border-width:20px;border-style:solid dashed dashed; border-color:#FFF transparent transparent;font-size:0; line-height:0;} 

두 번 째 불규칙 한 효 과 를 어떻게 실현 해 야 하 는 지 살 펴 볼 까요?
 
HTML 코드 는 앞의 것 과 같 습 니 다.

<div class="longen"><div class="arrow"><em></em><span></span></div>           </div>

css 는 다음 과 같이 변경 합 니 다:

.longen {width:300px; height:100px;position:relative; background-color:red;margin:50px auto 0;}

삼각형 화살표 다시 지정 하기:

.arrow{ position:absolute; width:70px; height:60px; left:-70px; bottom:10px;}

요소 가 인접 한 양쪽 border-style 값 은 solid(표시)로 설정 하고,다른 양쪽 은 transparent(표시 되 지 않 음)로 설정 합 니 다.

.arrow *{position:absolute; border-style:dashed solid solid dashed; font-size:0; line-height:0; }

다음은 먼저 직각 삼각형 을 시 뮬 레이 션 하여 한 요소 의 인접 한 양쪽 color 를 같은 값 으로 설정 하고 다른 두 색 을 투명 하 게 설정 하면 직각 을 얻 을 수 있 습 니 다.다음 과 같 습 니 다.

코드 는 다음 과 같이 계속 추가 합 니 다.

.arrow em{border-color:transparent #09F #09F transparent; border-width:30px 35px;} 

두 직각 삼각형 을 계속 겹 치면 불규칙 삼각형 코드 를 다음 과 같이 얻 을 수 있다.

.arrow span{ border-width:20px 35px;border-color:transparent #FFF #FFF transparent; bottom:0;} 

이 불규칙 한 그림 이 완성 되 었 습 니 다!
전체 코드 는 다음 과 같 습 니 다:

<div class="longen"> <div class="arrow"> <em></em> <span></span> </div>            </div>.longen {width:300px; height:100px;position:relative; background-color:red;margin:50px auto 0;}.arrow{ position:absolute; width:70px; height:60px; left:-70px; bottom:10px;}.arrow *{position:absolute; border-style:dashed solid solid dashed; font-size:0; line-height:0; }.arrow em{border-color:transparent #09F #09F transparent; border-width:30px 35px;} .arrow span{ border-width:20px 35px;border-color:transparent #FFF #FFF transparent; bottom:0;}

둘: 요소 의 border 를 설정 하여 작은 삼각형 을 모 의 하 는 것 외 에 도 특수 문자 로 모 의 할 수 있 습 니 다.특수 문자 로 작은 삼각형 을 모 의 하 는 것 도 포 지 셔 닝 과 중첩 으로 덮어 야 합 니 다.border 속성 을 조정 할 필요 가 없습니다.
먼저 마름모꼴'◆'를 살 펴 보 자.페이지 에 있 는 코드 는'&\#9670'이다.주의해 야 할 것 은 페이지 인 코딩 을 utf-8 로 설정 해 야 한 다 는 것 이다.웹 페이지 에 서 는◆를 문자 로 처리 할 수 있 고,font-size 를 통 해 크기 를 조정 하고,color 를 통 해 색상 을 설정 할 수 있다.
hTML 코드 는 다음 과 같 습 니 다.

<div class="longen"> <div class="arrow"> <em>&#9670</em> <span>&#9670</span> </div>            </div> 

가장 바깥쪽 div 스타일 을 설정 하고 사각형 상 자 를 얻 습 니 다:
코드 는 다음 과 같 습 니 다:

.longen{ width:300px; height:100px;position:relative; border:5px solid red; margin:50px auto 0;}

 
이 어 화살표 의 가장 바깥쪽 용기 div 를 포 지 셔 닝 하여 관찰 하기 편리 하 게 배경 색 을 설정 할 수 있 습 니 다. 
코드 는 다음 과 같 습 니 다.

.arrow{ position:absolute; width:40px; height:40px; left:100px; bottom:-40px; background:#ccc;overflow:hidden;}

다시◆스타일 설정:

.arrow *{position:absolute; font-size:40px; line-height:40px; width:40px; font-family:SimSun; font-style:normal; font-weight:normal; text-align:center; vertical-align:middle;}

그림 은 다음 과 같다.
 
메모:◆주류 브 라 우 저 에서 일치 하 는 것 을 표시 하기 위해 서 는 브 라 우 저의 기본 글꼴 스타일 을 삭제 해 야 합 니 다.특히 이 글꼴 의 설정 은 em,span 태그 의 글꼴 색상 을 각각 수정 하고 이 두 탭 에 대한 포 지 셔 닝 을 주의해 야 합 니 다.코드 는 다음 과 같 습 니 다.

.arrow em{ color:red; top:-15px;}.arrow span{ color:#fff; top:-21px;}

최종 효과 도 는 위 와 같이 다음 과 같다.

전체 코드 는 다음 과 같 습 니 다:

<div class="longen"> <div class="arrow"> <em>&#9670</em> <span>&#9670</span> </div>            </div> .longen{ width:300px; height:100px;position:relative; border:5px solid red; margin:50px auto 0;}.arrow{ position:absolute; width:40px; height:40px; left:100px; bottom:-40px;overflow:hidden;}.arrow *{position:absolute; font-size:40px; line-height:40px; width:40px; font-family:SimSun; font-style:normal; font-weight:normal; text-align:center; vertical-align:middle;}.arrow em{ color:red; top:-15px;}.arrow span{ color:#fff; top:-21px;} 
  ：                          ，                 ，       css3        .<div class="longen"> css3   </div>.longen{ width:300px; height:100px; border:5px solid #09F; position:relative; background-color:#FFF; } .longen:before,.longen:after{ content:"";display:block; border-width:20px; position:absolute; bottom:-40px; left:100px; border-style:solid dashed dashed; border-color:#09F transparent transparent; font-size:0; line-height:0; } .longen:after{ bottom:-33px; border-color:#FFF transparent transparent; }
       。      google          demo                                  ！        ！！