Pseudo-skewed box

dabblet.css

/**
 * Pseudo-skewed box
 */

html {
  background: #f06;
  background: linear-gradient(45deg, #f06, yellow);
  min-height: 100%;
  padding: 8em;
}

.angle-panel,
.angle-panel--inverse {
  position: relative;
  display: inline-block;
  background: white; /* fallback */
}

.angle-panel:before,
.angle-panel--inverse:before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: white;
  transform: perspective(50em) rotateY(18deg) scale(1.1);
}

.angle-panel--inverse:before {
  left: -5%;
  transform: perspective(50em) rotateY(-18deg) scale(1.1);
}

.angle-panel__copy {
  position: relative;
  width: 400px;
  padding: 1em 2em;
  z-index: 1;
}

dabblet.html

<div class='angle-panel'>
  <div class='angle-panel__copy'>
    <h1>Say it loud</h1>
    <p>Say it proud and some longer text. This one is a little lon</p>
  </div>
</div>

<br>
<br>

<div class='angle-panel--inverse'>
  <div class='angle-panel__copy'>
    <h1>Say it loud</h1>
    <p>Say it proud and some longer text. This one is a little lon</p>
  </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}