JSFiddle - React, Tailwind, and code Playground

by Jeremy Whiteford

HTML

<div class="clip-block">
  <div class="clip-wrap">
    <p class="clip-css">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione corporis omnis veritatis labore. Hic nesciunt eos vitae sint esse omnis iste dolorem, tempore quibusdam culpa commodi minus explicabo ducimus sed, aspernatur nisi consequatur suscipit cum. Cum nostrum suscipit impedit debitis ipsum quidem a non fuga et harum doloremque, aliquid mollitia nulla tempora error aspernatur velit ab officia labore. Deleniti esse est quisquam molestias dolorem vero dolor illum suscipit, repellat sunt explicabo sed consequatur fugiat, debitis vitae aspernatur iste asperiores quo.</p>
  </div>
</div>

CSS

body { background: #3f3f3f; }
.clip-block {
    text-align: center;
    max-width: 50em;
    margin: 0 auto;
}

.clip-wrap {
    display: inline-block;
    vertical-align: top;
    -webkit-clip-path: polygon(0 22%, 120% 0, 120% 100%, 0 78%);
    clip-path: polygon(0 22%, 120% 0, 120% 100%, 0 78%);
    padding: 5px;
    background: wheat;
}    
@media only screen and (min-width: 40.0625em) {
    .clip-wrap {
        background: red;
        -webkit-clip-path: polygon(0 23%, 128% 0, 129% 100%, 0 77%);
        clip-path: polygon(0 23%, 128% 0, 129% 100%, 0 77%);
    }
}
.clip-css {
    -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
    padding: 5em 2em;
    background: rgba(255,255,255, 1);
    text-align: left;
}