Hey there! I'm currently attempting to add a speech bubble at the bottom left using clip-path, but I'm struggling to adjust the pixels just right to achieve the clear and exact look I want. Can someone provide suggestions on how to accomplish this or offer an alternative method?
body {
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
}
.tolltip {
width: 147px!important;
height: auto;
background: transparent;
border: 4px solid white;
border-radius: 10px 10px 10px 0;
position: relative;
border-bottom-color: transparent;
}
.tolltip:after {
content: "";
position: absolute;
left: -4px;
bottom: -38px;
width: 13px;
height: 72px;
clip-path: polygon(0 0, 4px 0, 4px 37px, 53px 0, 40px 0, 0px 49px);
background: white;
}
.tolltip:before {
content: "";
position: absolute;
left: 8px;
right: 0px;
bottom: 0;
border-bottom: 4px solid white;
}<div class="tolltip">
<h3>content</h3>
</div>Here's what I'm aiming for: https://i.sstatic.net/Z2LRr.png