In the process of developing an application, we are incorporating a text display feature within a div that resembles a chat box direction, but with a curved style as depicted in the screenshot linked below.
Desired design exemplified in purple
Initially, I was able to create a dialog box with a straight edge following the CSS code provided below:
.big{
width: 300px;
height: 80px;
background-color: #000000;
box-shadow: 0 0 20px rgba(0, 0, 0, .3);
position: relative;
border-radius: 6px;
}
.big::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
right: -50px;
border: 50px solid transparent;
border-top: 30px solid #000;
clear: both;
}
My question is how do I implement the curved design into our current layout?