html5泡泡效果图,HTML5 泡泡样式的聊天（演讲）对话框

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

width: 100%;

background: #668bcb;

}

.speech-bubble {

-webkit-filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.15));

filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.15));

margin: 1rem;

margin-bottom: 40px;

padding: 1.5rem 2rem;

position: relative;

font-family: 'Source Sans Pro', sans-serif;

font-size: 1.2rem;

font-weight: 400;

background: #8CA8D8;

color: white;

}

.speech-bubble::before {

border: 12.5px solid transparent;

border-top: 12.5px solid #8CA8D8;

border-bottom: 0;

height: 0;

width: 0;

border-top-width: 25px;

content: '';

display: block;

position: absolute;

left: 3rem;

bottom: -25px;

-webkit-transform-origin: center;

transform-origin: center;

-webkit-transform: rotate(90deg) skew(-25deg) translateY(14.28571px);

transform: rotate(90deg) skew(-25deg) translateY(14.28571px);

}

.speech-bubble cite {

position: absolute;

bottom: -2rem;

left: 4.5rem;

font-size: 1rem;

font-style: normal;

font-weight: 300;

letter-spacing: 0.5px;

color: white;

}