如何用CSS实现带圆角的互锁区块？求技术指导

你的代码主要问题是子元素未分配宽高，且圆角位置未对应调整，以下是修正后的方案：

修正思路 #

• 给两个子区块设置flex:1平分父容器宽度，同时设置height:100%占满父容器高度，确保区块能完整显示。
• 调整圆角位置，让左侧区块的右下角圆角与右侧区块的左上角圆角对应，形成互锁咬合的视觉效果，父容器的背景色会填充圆角空隙，强化互锁感。

完整代码 #

HTML #

<div class="nwdev">
   <div class="dev1 dev11"></div>
   <div class="dev1 dev111"></div>
</div>

CSS #

.nwdev {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    background-color: #fff5ea;
}

.dev1 {
    flex: 1;
    height: 100%;
}

.dev1.dev111 {
    background: red;
    border-radius: 80px 0 0 0;
}

.dev1.dev11 {
    background: yellow;
    border-radius: 0 0 80px 0;
}

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