如何制作右侧倾斜且带有圆角的div容器？

能否制作右侧倾斜且带有圆角的div？尝试了多种方法（基于Stack Overflow的方案），但遇到两个核心问题：

• 无法在div顶部/底部添加同倾斜角度的图片：使用before/after伪元素时，图片会以父div的总宽度计算，导致在宽度收窄处溢出。
• 当前方案仅支持纯色背景，无法使用渐变或图片背景。

当前效果：

目标效果：

现有代码：

.slanted-container {
    --deg: 10deg;
    --radius: 10px;
}

.slanted-container > .slanted:not(:first-child):not(:last-child)::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: purple;
    border: 2px solid white;
    border-left-width: 3px;
    z-index: -1;
    transform: skew(var(--deg));
    transform-origin: center;
    border-radius: var(--radius);
}

.slanted {
    position: relative;
    width: 200px;
    min-height: 100px;
    text-align: center;
    line-height: 50px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slanted:first-child::before,
.slanted:first-child::after {
    position: absolute;
    content: '';
    top: 0;
    height: 100%;
    width: 55%;
    background: purple;
    border: 2px solid white;
    border-left-width: 3px;
    z-index: -1;
}

.slanted:first-child::before {
    right: 0px;
    border-radius: var(--radius);
    border-left: none;
    transform: skew(var(--deg));
    transform-origin: bottom right;
}

.slanted:first-child::after {
    left: 0px;
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    border-right: none;
}

.slanted:last-child::before,
.slanted:last-child::after {
    position: absolute;
    content: '';
    top: 0;
    height: 100%;
    width: 55%;
    background: purple;
    border: 2px solid white;
    border-left-width: 3px;
    z-index: -1;
}

.slanted:last-child::before {
    left: 0px;
    border-radius: var(--radius);
    border-right: none;
    transform: skew(var(--deg));
    transform-origin: top left;
}

.slanted:last-child::after {
    right: 0px;
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    border-left: none;
}

.image-wrapper img {
    display: block;
}

<div class="slanted-container flex p-12">
    <div
        class="slanted relative flex flex-col items-center justify-start overflow-hidden p-1 text-white "
    >
        <div class="image-wrapper relative h-40 w-full overflow-hidden rounded-lg">
            <img src="https://picsum.photos/200/100" class="h-full w-full rounded-lg object-cover" />
        </div>
        <p class="pt-2">sometext</p>
    </div>

    <div class="slanted">middle</div>
    <div class="slanted">middle 2</div>
    <div class="slanted">right</div>
</div>

放弃伪元素拼接的思路，改用容器嵌套+反向变换的方案，既支持倾斜圆角，也能让内部图片/渐变背景完美适配：

核心思路 #

1. 外层容器负责实现倾斜+圆角+边框，通过transform: skew()实现倾斜，配合overflow: hidden裁剪圆角。
2. 内层容器做反向skew()变换，抵消外层的倾斜，让内部内容（图片、文字）保持水平。
3. 利用CSS变量统一控制倾斜角度、圆角大小，方便调整。

完整代码 #

/* 全局变量控制 */
.slanted-container {
    --skew-deg: 10deg;
    --border-radius: 10px;
    --border-width: 2px;
    --border-color: white;
    --bg-color: purple;
    display: flex;
    gap: 8px; /* 控制模块间距 */
    padding: 12px;
}

/* 外层倾斜容器 */
.slanted-card {
    position: relative;
    width: 200px;
    min-height: 100px;
    overflow: hidden;
    border-radius: var(--border-radius);
    transform: skew(var(--skew-deg));
}

/* 实现边框效果 */
.slanted-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    transform: skew(calc(-1 * var(--skew-deg)));
    z-index: 1;
    pointer-events: none;
}

/* 内层内容容器：反向倾斜，恢复水平 */
.slanted-content {
    width: 100%;
    min-height: 100%;
    background: var(--bg-color);
    /* 支持渐变背景示例：background: linear-gradient(180deg, #800080, #4b0082); */
    transform: skew(calc(-1 * var(--skew-deg)));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 8px;
    box-sizing: border-box;
}

/* 图片容器适配 */
.slanted-image-wrapper {
    width: 100%;
    height: 160px; /* 对应h-40 */
    overflow: hidden;
    border-radius: calc(var(--border-radius) - 2px); /* 略小于外层圆角 */
    margin-bottom: 8px;
}

.slanted-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 首尾卡片特殊处理（如果需要不同的倾斜方向/形状） */
.slanted-card:first-child {
    transform: skew(calc(var(--skew-deg) * 0.5)); /* 调整左侧卡片倾斜角度 */
}

.slanted-card:first-child .slanted-content {
    transform: skew(calc(-1 * var(--skew-deg) * 0.5));
}

.slanted-card:last-child {
    transform: skew(calc(var(--skew-deg) * -0.5)); /* 调整右侧卡片倾斜角度 */
}

.slanted-card:last-child .slanted-content {
    transform: skew(calc(var(--skew-deg) * 0.5));
}

<div class="slanted-container">
    <div class="slanted-card">
        <div class="slanted-content">
            <div class="slanted-image-wrapper">
                <img src="https://picsum.photos/200/100" alt="示例图片" />
            </div>
            <p>sometext</p>
        </div>
    </div>

    <div class="slanted-card">
        <div class="slanted-content">middle</div>
    </div>

    <div class="slanted-card">
        <div class="slanted-content">middle 2</div>
    </div>

    <div class="slanted-card">
        <div class="slanted-content">right</div>
    </div>
</div>

方案优势 #

• 支持图片、纯色、渐变背景，不会出现溢出问题。
• 内部内容自动保持水平，无需额外调整。
• 通过CSS变量统一控制参数，修改角度、圆角、边框只需调整变量值。
• 结构清晰，比伪元素拼接更易维护。

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