jquery – CSS中的插入边框半径形状？

有没有办法在CSS中制作这个形状图像？ CSS3很好,不需要IE兼容性.它的渐变部分并不重要,它是右下方的曲线,我看不到怎么做.我已经看过各种jQuery角落插件但到目前为止对我来说没什么用.我无法使用背景图像,因为此内容的长度可变.

编辑：感谢您的回复,非常令人印象深刻！但有一件事 – 在图像本身中,有一个蓝色背景和一个无缝的灰色边框围绕整个事物,包括右边的曲线.如果解决方案涉及额外元素的边界半径“黑客”,也许不可能保持这个边界,但如果这也可以保留,那就更好了.

解决方法

我创造了一些东西.可能有更好的解决方案,但也许这会有所帮助.

jsFiddle

CSS：

.bubble {
    width: 200px;
    height: 30px;
}

.bubble .content {
    background: #00f;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: 20px;
}

.bubble .blue,.bubble .white,.bubble .white .innerwhite {
    width: 10px;
    height: 100%;
    float: right;
}

.bubble .blue {
    background: #00f;
    border-top-right-radius: 10px;
}

.bubble .white {
    background: #00f;
}

.bubble .white .innerwhite {
    background: #fff;
    border-bottom-left-radius: 10px;
}

HTML：

<div class="bubble">
    <div class="white">
        <div class="innerwhite"></div>
    </div>
    <div class="blue"></div>
    <div class="content"></div>
</div>