skewY() CSS Function - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Center the example on the page */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #f0f0f0;
}

.skew-box {
  width: 250px;
  padding: 20px;
  background-color: #3498db;
  color: white;
  text-align: center;
  border-radius: 8px;
  
  /* Apply the skew transformation */
  transform: skewY(-10deg);
  
  /* Optional: Smooth transition if you want to animate it later */
  transition: transform 0.3s ease;
}

/* Optional: Invert the skew for the text inside 
   so the text stays readable and upright */
.skew-box h2, .skew-box p {
  transform: skewY(10deg);
}</style></head><body><div class="container">
  <div class="skew-box">
    <h2>Skewed Element</h2>
    <p>This box is tilted 10 degrees using skewY.</p>
  </div>
</div></body></html>