如何剪辑两个绝对定位的div之间的交叉区域？

Question

我有两个绝对定位的div。一个在另一个上面。后面的一个从前面一侧突出约60px。两个div都有半透明背景和圆角右上角。

我试图将后面div的背景剪切到前面的div覆盖它的地方。

找不到办法。

此处示例：http://codepen.io/anon/pen/jEoNyw

＆＃13;

＆＃13;

#wrapper {
    background: url('http://lorempixel.com/output/abstract-q-c-1920-1920-3.jpg');
    height: 200px;
}
.block-inner {
    width: 50%;
    height: 200px;
    position: absolute;
    border-top-right-radius: 40px;
}
#back .block-inner {
    padding-right: 60px;
    background: rgba(0, 101, 164, 0.7);
}
#front .block-inner {
    background: rgba(255, 255, 255, 0.5);
}

＆＃13;

<div id="wrapper">
    <div id="back">
        <div class="block-inner">
            Back
        </div>
    </div>
    <div id="front">
        <div class="block-inner">
            Front
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;