如何为元素的左右两侧设置不同角度的倾斜（skew）效果？

要实现左右两侧倾斜角度不同的效果，不用直接skew整个容器（避免破坏文字和右侧布局），可以通过伪元素分别创建左右两个倾斜的背景块，中间保留正常的文字区域，这样既能满足不同倾斜角度的需求，又不会影响文字的显示和右侧效果。

修改后的代码实现： #

.skew-banner {
    position: relative;
    padding: 0.5rem 0; /* 只保留上下内边距，左右由伪元素控制 */
    color: white;
    font-size: 1.875rem;
    font-weight: bold;
    display: inline-block;
    overflow: hidden;
}
/* 左侧倾斜背景 */
.skew-banner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40%; /* 控制左侧倾斜区域宽度 */
    background-color: #ef4444;
    transform: skewX(-30deg); /* 左侧倾斜角度，可按需调整 */
    transform-origin: top right;
}
/* 右侧倾斜背景 */
.skew-banner::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 70%; /* 控制右侧倾斜区域宽度，确保覆盖中间衔接部分 */
    background-color: #ef4444;
    transform: skewX(-20deg); /* 右侧保持原有的倾斜角度 */
    transform-origin: top left;
}
/* 文字层级高于背景，确保显示在最上层 */
.unskew-text {
    position: relative;
    z-index: 1;
    padding: 0 2rem; /* 给文字添加左右内边距 */
    display: inline-block;
}

<div class="skew-banner">
  <span class="unskew-text">How The Program Works</span>
</div>

关键说明： #

• 用::before和::after伪元素分别生成左右两个背景块，设置不同的skewX角度和变换原点（transform-origin），确保倾斜边缘衔接自然。
• 文字元素设置position: relative和z-index: 1，保证文字显示在背景之上。
• 通过调整伪元素的width和transform-origin，可以灵活控制左右倾斜区域的大小和倾斜方向，完全不会影响右侧已实现的效果。

内容的提问来源于stack exchange，提问作者avocado