CSS를 사용하여 완전히 호환되는 툴팁 프롬프트 상자 구현

최종 렌더링:

기본 원리

먼저 일반 div 상자에 배경색을 설정한 후 For를 사용합니다. 이 게시물에서 얻은 삼각형 아이콘, div 상자는 상대 위치 모드로 설정되고, 삼각형 아이콘은 절대 위치 모드로 설정되고, 위치는 div 상자를 기준으로 적절한 위치로 조정됩니다. 그러면 기본 툴팁이 표시되지만 테두리가 없으면 항상 불편해 보입니다. div 상자에 테두리를 설정할 수 있는데 어렵지는 않지만 삼각형 아이콘에 테두리를 설정하는 방법은 무엇입니까? 여기서는 서로 다른 색상의 두 개의 삼각형 아이콘을 겹쳐서 그 위치를 1px씩 엇갈리게 하는 방법을 사용합니다. 이렇게 하면 아래쪽 삼각형의 위쪽 테두리가 가려지고 함께 겹쳐지면 왼쪽과 오른쪽 테두리 부분만 노출됩니다. 테두리 아이콘처럼 보이는 삼각형이 표시됩니다.

단계별

1. 먼저 상대적으로 위치가 지정된 상자 div를 정의합니다.

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

css:

.tooltips{
position:relative;
width:300px;
height:80px;
line-height:60px;
background:#D7E7FC;
border-radius:4px;
}

효과:

2. 다음으로 이전 게시물의 지식을 활용하여 div에 삼각형 아이콘을 추가합니다. 상자 ：

<div class="tooltips">
  <div class="arrow "></div>
</div>

삼각형 아이콘 CSS:

.arrow{
  position:absolute;
  color: #D7E7FC;
  width: 0px;
  height:0px;
  line-height: 0px;
  border-width: 20px 15px 0;
  border-style: solid dashed dashed dashed;
  border-left-color: transparent;
  border-right-color: transparent;
  bottom: -20px;
  right: 50%;
}

효과:

이제 형태가 갖춰지기 시작해서 직접 사용해도 됩니다. 하지만 툴팁 배경색이 대상 배경색과 일치하면 구별이 어렵습니다. , 따라서 테두리를 정의해야 합니다.

3. 테두리 추가
css:

.tooltips{
  position:relative;
  width:300px;
  height:80px;
  line-height:60px;
  background:#D7E7FC;
  border:1px solid #A5C4EC;
  border-radius:4px;
}

효과:

상자에는 테두리 효과가 있지만 아래의 작은 삼각형은 "보호"되지 않았습니다. 이는 처녀자리에게는 참을 수 없는 일입니다!

4. "작은 삼각형"에 고무줄을 씌워주세요
두 개의 삼각형을 겹쳐놓는 방법을 사용해야 한다는 원리를 설명하면서 먼저 div의 정의를 합니다. 두 개의 삼각형과 배경색 상자 테두리와 동일한 색상, 상자의 배경색과 일치하는 배경색:

<div class="tooltips">
  <div class="arrow arrow-border"></div>
  <div class="arrow arrow-bg"></div>
</div>

CSS는 다음과 같이 정의됩니다.

.arrow{
  position:absolute;
  width: 0px;
  height:0px;
  line-height: 0px;
  border-width: 20px 15px 0;
  border-style: solid dashed dashed dashed;
  border-left-color: transparent;
  border-right-color: transparent;
}
.arrow-border{
  color: #A5C4EC;
  bottom: -20px;
  right: 50%;
}
.arrow-bg{
  color: #D7E7FC;
  bottom: -19px;
  right: 50%;
}

참고: .arrow-bg와 .arrow-border의 하단 위치 차이는 1px입니다( 테두리 너비에 따라 조정됨) 두 div의 순서는 바뀔 수 없습니다.
최종 효과를 살펴보겠습니다.

완료되었습니다. IE6에서 실행하면 완벽하게 호환됩니다!

완전히 호환되는 툴팁 프롬프트 상자를 얻기 위해 CSS를 사용하는 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!