css制作聊天气泡android,CSS聊天气泡-优快云博客

这篇博客详细介绍了如何使用CSS创建具有不同方向和形状的对话气泡，包括左上角、右上角、左下角和右下角的三角形。内容涵盖了设置背景颜色、字体、边框以及使用伪元素实现三角形的方法，适用于网页设计中的对话框或注释样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css

/* General CSS Setup */

body{

background-color: lightblue;

font-family: "Ubuntu-Italic", "Lucida Sans", helvetica, sans;

}

/* container */

.container {

padding: 5% 5%;

}

/* CSS talk bubble */

.talk-bubble {

margin: 40px;

display: inline-block;

position: relative;

width: 200px;

height: auto;

background-color: lightyellow;

}

.border{

border: 8px solid #666;

}

.round{

border-radius: 30px;

-webkit-border-radius: 30px;

-moz-border-radius: 30px;

}

/* Right triangle placed top left flush. */

.tri-right.border.left-top:before {

content: ' ';

position: absolute;

width: 0;

height: 0;

left: -40px;

right: auto;

top: -8px;

bottom: auto;

border: 32px solid;

border-color: #666 transparent transparent transparent;

}

.tri-right.left-top:after{

content: ' ';

position: absolute;

width: 0;

height: 0;

left: -20px;

right: auto;

top: 0px;

bottom: auto;

border: 22px solid;

border-color: lightyellow transparent transparent transparent;

}

/* Right triangle, left side slightly down */

.tri-right.border.left-in:before {

content: ' ';

position: absolute;

width: 0;

height: 0;

left: -40px;

right: auto;

top: 30px;

bottom: auto;

border: 20px solid;

border-color: #666 #666 transparent transparent;

}

.tri-right.left-in:after{

content: ' ';

position: absolute;

width: 0;

height: 0;

left: -20px;

right: auto;

top: 38px;

bottom: auto;

border: 12px solid;

border-color: lightyellow lightyellow transparent transparent;

}

/*Right triangle, placed bottom left side slightly in*/

.tri-right.border.btm-left:before {

content: ' ';

position: absolute;

width: 0;

height: 0;

left: -8px;

right: auto;

top: auto;

bottom: -40px;

border: 32px solid;

border-color: transparent transparent transparent #666;

}

.tri-right.btm-left:after{

content: ' ';

position: absolute;

width: 0;

height: 0;

left: 0px;

right: auto;

top: auto;

bottom: -20px;

border: 22px solid;

border-color: transparent transparent transparent lightyellow;

}

/*Right triangle, placed bottom left side slightly in*/

.tri-right.border.btm-left-in:before {

content: ' ';

position: absolute;

width: 0;

height: 0;

left: 30px;

right: auto;

top: auto;

bottom: -40px;

border: 20px solid;

border-color: #666 transparent transparent #666;

}

.tri-right.btm-left-in:after{

content: ' ';

position: absolute;

width: 0;

height: 0;

left: 38px;

right: auto;

top: auto;

bottom: -20px;

border: 12px solid;

border-color: lightyellow transparent transparent lightyellow;

}

/*Right triangle, placed bottom right side slightly in*/

.tri-right.border.btm-right-in:before {

content: ' ';

position: absolute;

width: 0;

height: 0;

left: auto;

right: 30px;

bottom: -40px;

border: 20px solid;

border-color: #666 #666 transparent transparent;

}

.tri-right.btm-right-in:after{

content: ' ';

position: absolute;

width: 0;

height: 0;

left: auto;

right: 38px;

bottom: -20px;

border: 12px solid;

border-color: lightyellow lightyellow transparent transparent;

}

left: -8px;

right: auto;

top: auto;

bottom: -40px;

border: 32px solid;

border-color: transparent transparent transparent #666;

left: 0px;

right: auto;

top: auto;

bottom: -20px;

border: 22px solid;

border-color: transparent transparent transparent lightyellow;

/*Right triangle, placed bottom right side slightly in*/

.tri-right.border.btm-right:before {

content: ' ';

position: absolute;

width: 0;

height: 0;

left: auto;

right: -8px;

bottom: -40px;

border: 20px solid;

border-color: #666 #666 transparent transparent;

}

.tri-right.btm-right:after{

content: ' ';

position: absolute;

width: 0;

height: 0;

left: auto;

right: 0px;

bottom: -20px;

border: 12px solid;

border-color: lightyellow lightyellow transparent transparent;

}

/* Right triangle, right side slightly down*/

.tri-right.border.right-in:before {

content: ' ';

position: absolute;

width: 0;

height: 0;

left: auto;

right: -40px;

top: 30px;

bottom: auto;

border: 20px solid;

border-color: #666 transparent transparent #666;

}

.tri-right.right-in:after{

content: ' ';

position: absolute;

width: 0;

height: 0;

left: auto;

right: -20px;

top: 38px;

bottom: auto;

border: 12px solid;

border-color: lightyellow transparent transparent lightyellow;

}

/* Right triangle placed top right flush. */

.tri-right.border.right-top:before {

content: ' ';

position: absolute;

width: 0;

height: 0;

left: auto;

right: -40px;

top: -8px;

bottom: auto;

border: 32px solid;

border-color: #666 transparent transparent transparent;

}

.tri-right.right-top:after{

content: ' ';

position: absolute;

width: 0;

height: 0;

left: auto;

right: -20px;

top: 0px;

bottom: auto;

border: 20px solid;

border-color: lightyellow transparent transparent transparent;

}

/* talk bubble contents */

.talktext{

padding: 1em;

text-align: left;

line-height: 1.5em;

}

.talktext p{

/* remove webkit p margins */

-webkit-margin-before: 0em;

-webkit-margin-after: 0em;

}