Create odd css element
I am trying to create an odd shaped dialog that I liked in the link below (no spiky tail). I thought about this via a polyfill, but it made the element too big. I thought I could do it with pseudo-elements, but I didn't think I could put a shadow behind the effect and have an odd top / bottom shape with only two pseudo-elements.
The best way I could think of was to nest a few div
inside the main one and put them with absolute
and install top
manually, but I was wondering if there was an easier way to do this.
If I want to do div
like this and write things inside without cutting them off, how do I do it?
source to share
A single pseudo-class element absolutely positioned using perspective and transforms might look like this.
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>
source to share