I'm trying to make a odd-shaped dialogue box shaped liked one in the link below (without the wiggly tail). I've thought about doing it through polyfill, but that ended up making the element too large. I thought I could maybe do it with pseudo elements, but I didn't think I could put a shadow behind effect and have the odd-shaped top/bottom with just two pseudo elements.
The best method I could think of was to nest multiple divs inside the main one and position them with absolute and set the top manually, but I was wondering if there was an easier way of doing so.
If I want to make a div like this and write things inside without them being cut off, how should I go about doing it?