<div class="bubble box-shadow">box-shadow</div>
<div class="bubble drop-shadow">drop-shadow</div>
body {
display: flex;
height: 90vh;
align-items: center;
justify-content: center;
}
.bubble {
position: relative;
width: 200px;
height: 100px;
margin-right: 50px;
padding: 10px;
color: #fff;
background: #00bce4;
border-radius: 5px;
}
.bubble:after {
content: "";
position: absolute;
left: 100%;
bottom: 15px;
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: transparent;
margin-bottom: 50px;
border-left-width: 15px;
border-left-color: currentColor;
color: #00bce4;
}
.box-shadow {
box-shadow: 0 0 10px #000;
}
.drop-shadow {
filter: drop-shadow(0 0 10px #000);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.