<div class="chat-bubble">
麥誠直播 #6
</div>
body {
display: grid;
place-items: center;
min-height: 95vh;
font-size: 2em;
}
.chat-bubble {
background: gold;
padding: 1em;
border-radius: 5em;
position: relative;
box-shadow: 0 .2em goldenrod;
}
.chat-bubble::after {
--triangle-size: .6em;
content:'';
border: var(--triangle-size) solid transparent;
border-top-color: gold;
position: absolute;
bottom: calc(var(--triangle-size) * -2 + 2px);
left: calc(50% - var(--triangle-size));
}
.chat-bubble::before {
--triangle-size: .6em;
content:'';
border: var(--triangle-size) solid transparent;
border-top-color: goldenrod;
position: absolute;
bottom: calc(var(--triangle-size) * -2 + 2px - .2em);
left: calc(50% - var(--triangle-size));
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.