커스텀 CSS 채팅 풍선

debugcn 에 게시 Dev

차 마라 니 샨타

CSS를 사용하여 말풍선을 만들었습니다. 하지만 원하는 결과를 얻지 못했습니다. 다음은 내 코드입니다.

body{
  background-color: lightgreen;
}

.bubble {
  margin: 100px;
  display: inline-block;
  position: relative;
  width: 300px;
  height: auto;
  background-color: white;
}
.border{
  border: 2px solid red;
}
.border-radius{
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;

}
.triangle-right.border.right-top:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -26px;
  top: -2px;
  bottom: auto;
  border: 25px solid;
  border-color: red transparent transparent transparent;
}
.triangle-right.right-top:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -22px;
  top: -0.3px;
  bottom: auto;
  border: 25px solid;
  border-color: white transparent transparent transparent;
}
.chat{
  padding: 6px;
}

<div class="bubble triangle-right border-radius border right-top">
  <div class="chat">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>
  </div>
</div>

내가 얻는 출력 :

내가 원하는 출력 :

두 번째 사진에서 어떻게 출력을 얻을 수 있습니까? 두 번째 이미지와 마찬가지로 오른쪽 상단 모서리에 곡선과 같은 효과를 얻고 싶습니다. 감사.

G- 시릴

radial-gradient()곡선을 그릴 수 있습니다 .

가능한 예

body{
  background-color: lightgreen;
}

.bubble {
  margin: 100px;
  display: inline-block;
  position: relative;
  width: 300px;
  height: auto;
  background-color: white;
}
.border{
  border: 2px solid red;
}
.border-radius{
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;

}

.triangle-right.right-top:before{
  content: ' ';
  position: absolute;
  border-top:2px red solid;
  width:6px;
  top:-2px;
  right:0;
  height:10px;
  background:white;
}
.triangle-right.right-top:after{
  content: ' ';
  position: absolute;
  width: 30px;
  height: 40px;
  left: auto;
  right: -30px;
  top: -2px; 
  background:radial-gradient(ellipse at bottom right, transparent 28px, red 29px , red 30px , white 31px);
  border-top:solid red 2px; 
}
.chat{
  padding: 6px;
}

<div class="bubble triangle-right border-radius border right-top">
  <div class="chat">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>
  </div>
</div>

당신의 필요에 tweek 크기와 위치.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-05-26

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

커스텀 CSS 채팅 풍선

커스텀 CSS 채팅 풍선

Flutter 채팅 풍선 텍스트가 정렬되지 않음

RecyclerView 왼쪽에 채팅 풍선 정렬

반응 네이티브 채팅 앱 "분할"채팅 풍선

채팅 풍선을 오른쪽으로 이동

버블 (채팅) 박스 CSS3

CSS 커스텀 콤보 박스 문제

커스텀 썸네일 디자인 CSS

CSS 말풍선 호버 변경 색상

채팅 풍선에 날짜 및 발신자 이름을 추가하는 방법

단일 채팅 풍선의 배경색을 동적으로 변경

포함 된 채팅 및 스트림을 CSS와 함께 정렬

커스텀 CSS와 함께 부트 스트랩 CSS 사용

커스텀 커널이있는 부팅 가능한 Ubuntu USB

icCube보고 AmChart 풍선 텍스트 fromatting

icCube보고 AmChart 풍선 텍스트 fromatting

amcharts의 풍선 스타일링

풍선 스트링 역 기구학

프리미티브를 커스텀 클래스로 캐스팅

충돌 후 커스텀 SKSpriteNode 클래스 캐스팅

무선 Windows 8 호스팅 네트워크의 채널 변경

Three.JS-커스텀 메시의 레이 캐스팅

Three.JS-커스텀 버텍스 셰이더 포팅

CSS 말풍선 : 말풍선이있는 위치에 따라 팁 위치를 업데이트하는 방법

커스텀 애니메이션 메뉴 CSS / jQuery

Rails 커스텀 레이아웃-라우팅 오류

CSS로 만든 말풍선 배치 정보

CSS 빨간색 알림 풍선을 수정하는 방법

다른 상자 아래에 숨겨진 말풍선 CSS 효과

텍스트 길이에 대한 CSS 확장 가능한 채팅 거품?