79192474

Date: 2024-11-15 13:05:23
Score: 0.5
Natty:
Report link

What you are locking for is the property transform: skew().

Just give the container its value and its child elements the opposite one.

.skew {
  background: #ff00ff;
  text-align: center;
  padding: 1rem;
  width: 60%;
  transform: skew(-20deg);
  margin: 0 auto;
}

h1 {
  transform: skew(20deg);
}
<div class="skew">
  <h1>Hello World!</h1>
</div>

Reasons:
  • Has code block (-0.5):
  • Starts with a question (0.5): What you are
  • Low reputation (0.5):
Posted by: MrJoky