Making a odd-shaped elementwith css

Question

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?

Answer 1

A single element with pseudo classes absolutely positioned using perspective and transforms can look like that.

div {
  position: relative;
  display: inline-block;
  color: white;
  margin: 3em;
  perspective: 250px;
}
div::before, div::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -1em;
  left: -1.5em;
  right: -2em;
  bottom: -1em;
  background: black;
  padding: 2em 3em .5em .5em;
  transform: rotateX(180deg) rotateY(15deg) rotate(1.5deg) skewX(25deg);
}

div::before {
  background: white;
  top: -1.5em;
  left: -2.25em;
  right: -2.75em;
  bottom: -1.75em;
  transform: rotateX(180deg) rotateY(15deg) skewX(35deg);
}

body {
  background: red;
}

<div>i know kung foo</div>