순수 CSS를 사용하여 거품 대화 상자의 날카로운 모서리 효과를 구현하는 예제 코드-CSS 튜토리얼-php.cn

순수 CSS를 사용하여 거품 대화 상자의 날카로운 모서리 효과를 구현하는 예제 코드

零下一度

풀어 주다： 2017-06-29 15:58:43

원래의

1585명이 탐색했습니다.

이 글에서는 버블 대화 상자의 날카로운 모서리 처리를 구현하기 위한 순수 CSS의 구현 코드를 주로 소개합니다. 이 코드는 매우 훌륭하고 참조 가치가 있습니다. 필요한 친구는 이를 참조할 수 있습니다.

먼저 렌더링을 살펴보세요.

간단한 대략적인 코드:
html:

<p class="dialog-box">  
  <span class="bot"></span>  
  <span class="top"></span>  
</p>

로그인 후 복사

less:

.dialog-box {  
  position: relative;  
  span {  
    width:0;   
    height:0;   
    font-size:0;   
    overflow:hidden;   
    position:absolute;  
    &.bot{  
      border-width: 15px;   
      border-style: solid dashed dashed;   
      border-color: transparent transparent #F9743A transparent;   
      left: 15px;   
      top: -29px;  
    }  
    &.top{  
      border-width:13px;   
      border-style:solid dashed dashed;   
      border-color:transparent transparent #fff transparent;   
      left:17px;   
      top:-25px;  
    }  
  }  
}

로그인 후 복사

현지어로 설명:

다른 방향으로 날카로운 모서리를 원할 경우 테두리 색상 순서(위, 오른쪽, 아래)를 조정하세요. , 왼쪽) .

주요 원칙은 아마도 모양은 같지만 비율이 다른 두 개의 작은 삼각형, 배경색이 같은 단색 삼각형 봇, 흰색 배경의 상단이 있고 상단이 봇을 덮은 다음 조정하는 것입니다. (일반적으로 단색 블록은 흰색 블록보다 크기 때문에 윙크하는 가장자리가 표시될 수 있습니다.)

마지막으로 우리는 그것들이 겹쳐지도록 모든 수단을 시도했고(흰색 상단이 상단에, 솔리드 봇이 하단에 있음) 마지막으로 절대 위치 지정(왼쪽, 상단) 매개변수를 조정하여 이음새 없이 겹치도록 했습니다. . 좋아요, 끝났어요. 이해하셨는지 궁금해요.

위 내용은 순수 CSS를 사용하여 거품 대화 상자의 날카로운 모서리 효과를 구현하는 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!