I’m trying to achieve this kind of layout:
This is what I have so far:
I’m just missing the left side to be skewed at a different angle and I’m not sure how to do that without messing up the right side.
.skew-banner {
position: relative;
background-color: #ef4444; /* bg-red-500 */
padding: 0.5rem 2rem; /* px-8 py-2 */
color: white;
font-size: 1.875rem; /* text-3xl */
font-weight: bold;
transform: skewX(-20deg);
}
.unskew-text {
transform: skewX(20deg);
display: inline-block;
}<div class="skew-banner">
<span class="unskew-text">How The Program Works</span>
</div>4