JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<div id="myDiv">
  <p>
    This div element is skewed 20 degrees along the X-axis.</p>
</div>

CSS

div {
  width: 300px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  margin-left: 20px;
  padding: 50px;
  font-size: 1.7em;
  transform: skew(10deg, 0deg);
  /* Standard syntax */
  overflow:hidden;
}

div#myDiv p {
  background-color: green;
  width:100%;
  padding: 20px 70px;
  color:#fff;
  margin-left:-70px;
  transform: skew(-10deg, 0deg);
  /* Standard syntax */
}