목차
기본 구조
1. 버블 컨테이너 스타일
2. 의사 요소로 포인터를 추가하십시오
3. 선택 사항 : 포인터 위치와 방향을 조정하십시오
4. 모양을 사용자 정의하십시오
예 : 수신기 버블 (왼쪽 정렬, 다른 색상)
웹 프론트엔드 CSS 튜토리얼 CSS로 음성 버블을 만드는 방법

CSS로 음성 버블을 만드는 방법

Aug 11, 2025 pm 09:04 PM
css 거품

CSS Speech Bubble을 만들려면 의사 요소가있는 div 컨테이너를 사용해야합니다. . 2. pseudo-elements를 사용하여 포인터를 만듭니다 : 너비와 높이를 0으로 설정하면 테두리를 사용하여 경계선과 같은 삼각형을 생성하고 왼쪽 테두리가 투명하고 바닥에 배치하십시오. 3. 포인터 위치와 방향을 조정하십시오. 예를 들어, 상단 : -10px 상단 포인팅 화살표를 구현하려면 왼쪽 : 50%는 변환으로 중앙에 있습니다 : translatex (-50%); 4. 사용자 정의 외관 : 다른 사용자를 위해 다른 배경색을 설정하고, 상자 섀도우를 추가하여 레이어링 감각을 향상시키고, 테두리 너비를 조정하여 포인터 크기를 변경하십시오. 이 예에서 .receiver 클래스는 밝은 회색 배경을 사용하여 왼쪽과 정렬되며 포인터는 바닥의 왼쪽에 있으며 마지막으로 가볍고 유연한 음성 버블 디자인을 실현하며 추가 HTML 요소가 필요하지 않으며 완전한 문장으로 끝납니다.

CSS로 음성 버블을 만드는 방법

CSS를 사용하여 음성 버블을 만드는 것은 채팅 인터페이스, 툴 스텐트 또는 주석 섹션에 대한 일반적인 설계 작업입니다. 기본 CSS 속성과 포인터에 대한 의사 요소 (스피커를 가리키는 작은 삼각형)를 사용하여이를 달성 할 수 있습니다. 단계별로 수행하는 방법은 다음과 같습니다.

기본 구조

연설 버블 역할을하는 간단한 div 로 시작하십시오.

 <div class = "Speech-Bubble"> 안녕하세요, 이것은 음성 버블입니다! </div>

1. 버블 컨테이너 스타일

첫째, 메인 컨테이너를 둥근 사각형처럼 보이게합니다 (전형적인 음성 거품) :

 .speech-bubble {
  위치 : 상대;
  배경 : #007bff;
  색상 : 흰색;
  패딩 : 15px 20px;
  Border-Radius : 18px;
  최대 세포 : 300px;
  Font-Family : Arial, Sans-Serif;
  라인 높이 : 1.4;
}

핵심 사항 :

  • border-radius 부드럽고 둥근 가장자리를 제공합니다.
  • max-width 거품이 너무 넓게 늘어나지 못하게합니다.
  • position: relative 필요하므로 포인터 (화살표)를 절대 위치를 사용하여 올바르게 배치 할 수 있습니다.

2. 의사 요소로 포인터를 추가하십시오

Pseudo Element ::after 삼각형 포인터를 만듭니다.

 .speech-bubble :: 이후 {
  콘텐츠: &#39;&#39;;
  위치 : 절대;
  하단 : -10px;
  왼쪽 : 20px;
  너비 : 0;
  높이 : 0;
  왼쪽 경계 : 10px 고체 투명;
  경계 오른쪽 : 10px 고체 투명;
  테두리 : 10px 고체 #007bff;
}

작동 방식 :

  • 삼각형은 CSS 경계를 사용하여 만들어집니다. 3면을 투명하게 설정하고 거품과 같은 색상으로 1 (상단)을 설정하면 아래쪽으로 포인팅하는 삼각형이됩니다.
  • bottom: -10px 기포 바로 아래에 포인터를 위치시킵니다.
  • left: 20px 바닥 가장자리를 따라 화살표가 나타나는 곳을 제어합니다.

3. 선택 사항 : 포인터 위치와 방향을 조정하십시오

포인터가 나타나거나 다른 방향으로 가리키는 위치를 변경할 수 있습니다.

  • 상단 포인터 (아래 스피커 용) :

     .speech-bubble :: 이후 {
      상단 : -10px;
      하단 : 자동;
      테두리 : 없음;
      국경-바닥 : 10px 고체 #007bff;
    }
  • 왼쪽 또는 오른쪽 지점 : border-left 또는 border-right 사용하고 그에 따라 topleft/right 조정하십시오.

  • 포인터 중심 : left: 50%transform: translateX(-50%) .

     .speech-bubble :: 이후 {
      왼쪽 : 50%;
      변환 : translatex (-50%);
    }

4. 모양을 사용자 정의하십시오

  • 다른 사용자의 색상을 변경합니다 (예 : 발신자 대 수신기).
  • 깊이에 미묘한 그림자를 추가하십시오.
     Box-Shadow : 0 2PX 5PX RGBA (0, 0, 0, 0.1);
  • 테두리 너비를 변경하여 포인터 크기를 조정하십시오.

예 : 수신기 버블 (왼쪽 정렬, 다른 색상)

 .수화기 {
  배경 : #e9e9eb;
  색상 : 검은 색;
  정렬-펠트 : Flex-Start;
}

.receiver :: 이후 {
  왼쪽 : 30px;
  테두리 : 10px 고체 #e9e9eb;
  하단 : -10px;
}

그리고 HTML에서 :

 <div class = "Speech-Bubble 수신기"> 안녕하세요! </div>

기본적으로, 트릭은 스타일의 용기를 의사 요소를 사용하여 테두리로 만든 삼각형과 결합하는 것입니다. 국경 기반 삼각형이 어떻게 작동하는지 이해하면 어디서나 어디에나 위치 할 수 있습니다. 유연하고 가벼우 며 추가 HTML 요소가 필요하지 않습니다.

위 내용은 CSS로 음성 버블을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

CSS 배경 필터 속성을 사용하는 방법은 무엇입니까? CSS 배경 필터 속성을 사용하는 방법은 무엇입니까? Aug 02, 2025 pm 12:11 PM

배경 필터는 요소 뒤의 내용에 시각적 효과를 적용하는 데 사용됩니다. 1. 배경 필터 : Blur (10px) 및 기타 구문을 사용하여 프로스트 유리 효과를 달성합니다. 2. 흐림, 밝기, 대비 등과 같은 여러 필터 기능을 지원하며 중첩 될 수 있습니다. 3. 유리 카드 디자인에 종종 사용되며 요소가 배경과 겹치도록해야합니다. 4. 현대식 브라우저는 지원이 좋으며 @Supports는 다운 그레이드 솔루션을 제공하는 데 사용될 수 있습니다. 5. 성능을 최적화하기 위해 과도한 흐림 값과 빈번한 다시 그리기를 피하십시오. 이 속성은 요소 뒤에 내용이있는 경우에만 적용됩니다.

CSS Aspect-Ratio 속성은 무엇이며 사용 방법은 무엇입니까? CSS Aspect-Ratio 속성은 무엇이며 사용 방법은 무엇입니까? Aug 04, 2025 pm 04:38 PM

theaspect-ratiocsspropertydefinesthewidth-heightratioofanlement

CSS로 튀는 애니메이션을 만드는 방법은 무엇입니까? CSS로 튀는 애니메이션을 만드는 방법은 무엇입니까? Aug 02, 2025 am 05:44 AM

@keyframesBounceWith0%, 100%Attranslatey (0) 및 50%Attranslatey (-20px) torecreateAbasicBounce.2.applyTheAnimationToAnElementUsingAnimation : Bounce0.6Sease-in-outinfiniteforsmooth, Continuous-Motion.3. keyframesricatistic-bouncouswithicwithwithwithwithwithwithwithwithwithwithwithwithwithwithwithwithwithwithwithictscceit

CSS를 사용하는 방법 : 빈 의사 클래스? CSS를 사용하는 방법 : 빈 의사 클래스? Aug 05, 2025 am 09:48 AM

The : emeltypseudo classselectselementswithnochildrenorcontent, suontspacesorcomments, meontrulyemptyelementslikematchit; 1. itcanhideemptycontainersbyusing : empty {display : none;} tocleanuplayouts; 2.itallowsaddingplosederstylingvia :: 이후, wh

가상 통화 거래 앱은 무엇입니까? _ 2025 년 상위 10 개 권장 공식 가상 통화 거래 앱 가상 통화 거래 앱은 무엇입니까? _ 2025 년 상위 10 개 권장 공식 가상 통화 거래 앱 Aug 08, 2025 pm 06:42 PM

1. Binance는 엄청난 거래량과 풍부한 거래 쌍으로 유명합니다. 다양한 거래 모델과 완벽한 생태계를 제공합니다. 또한 Safu Funds 및 여러 보안 기술을 통해 사용자 자산의 보안을 보장하고 준수하는 운영에 큰 중요성을 부여합니다. 2. OKX OUYI는 광범위한 디지털 자산 거래 서비스 및 통합 거래 계정 모델을 제공하고 Web3 분야를 적극적으로 배포하며 엄격한 위험 관리 및 사용자 교육을 통해 거래 보안 및 경험을 향상시킵니다. 3. Gate.io Sesame은 문을 열고 통화 속도가 우수하고 풍부한 통화를 가지고 있으며, 다양한 거래 도구와 부가가치 서비스를 제공하며, 여러 보안 검증 메커니즘을 채택하고 사용자 신뢰를 향상시키기 위해 자산 준비금의 투명성을 준수합니다. 4. Huobi는 강력한 트랜잭션 깊이 및

CSS 전용 아코디언 메뉴를 만드는 방법? CSS 전용 아코디언 메뉴를 만드는 방법? Aug 03, 2025 pm 01:48 PM

숨겨진 확인란 및 CSS를 사용하십시오. 컨텐츠 디스플레이를 제어하기 위해 인접한 형제 자매 선택기 ()와 결합 된 확인 된 의사 클래스; 2. HTML 구조에는 붕괴 된 각 항목에 대한 입력, 레이블 및 컨텐츠 DIV가 포함되어 있습니다. 3. 최대 높이 전환을 설정하여 원활한 확장/붕괴 애니메이션; 4. 의사 요소로 개방/클로즈 상태 아이콘을 추가하십시오. 5. 라디오 유형을 사용하여 단일 개봉 모드를 구현하는 반면, 확인란은 여러 개구부를 허용합니다. 이것은 JavaScript가 필요하지 않고 최신 브라우저와 호환되는 대화식 접이식 메뉴 구현입니다.

창의적인 모양에 CSS 클립 경로를 사용하는 방법은 무엇입니까? 창의적인 모양에 CSS 클립 경로를 사용하는 방법은 무엇입니까? Aug 04, 2025 pm 02:55 PM

CSSCLIP-PATH를 사용하여 추가 이미지 나 복잡한 SVG없이 브라우저에서 비류 형태를 만듭니다. 2. 일반적인 형상 함수에는 inset (), circle (), elipse () 및 polygon ()이 포함됩니다. 여기서 Polygon ()는 코디네이션 포인트를 정의하여 사용자 정의 모양을 구현하며 대화 상자 버블과 같은 창의적인 디자인을 만드는 데 적합합니다. 3. Clip-Path는 호버링 중 Circle 확장과 같은 CSS 전환 또는 키 프레임 애니메이션을 통해 동적 효과를 달성 할 수 있지만 동일한 유형의 정점과 정점 수의 inter 자형 애니메이션 만 지원합니다. 4. 응답 성과 접근성에주의를 기울이면 컨텐츠를 지원하지 않을 때는 계속 사용할 수 있도록 텍스트를 읽을 수 있고 과도한 자르기를 피하고 성능을 최적화하기 위해 다각형 정점 수를 제어하십시오. 동시에

CSS로 텍스트 그라디언트를 만드는 방법은 무엇입니까? CSS로 텍스트 그라디언트를 만드는 방법은 무엇입니까? Aug 01, 2025 am 07:39 AM

CSS 텍스트 그라디언트 효과를 달성하기 위해 배경 이미지 및 배경 클립을 사용하십시오. 2. -webkit-background-clip을 설정해야합니다 : 텍스트 및 -webkit-text-fill-color : 브라우저 호환성을 보장하기 위해 투명; 3. 선형 또는 방사형 구배를 사용자 정의 할 수 있으며 시각적 효과를 향상시키기 위해 굵게 또는 큰 텍스트를 사용하는 것이 좋습니다. 4. 지원되지 않는 환경의 대체 색상으로 색상을 설정하는 것이 좋습니다. 5. 대안은 -webkit 마스크 이미지를 사용하여보다 복잡한 효과를 달성 할 수 있지만, 주로 고급 시나리오에 적합합니다. 이 방법은 간단하고 호환성과 시각적이 좋습니다

See all articles