html - 带有背景图像的气泡，但这是带有圆 Angular 的喷射器

我正在创建一个气泡，气泡的背景为小三角形，但是唯一的问题是它也需要圆角。我不完全确定该怎么做，但是任何黑客或其他任何东西都将不胜感激。

这就是我所拥有的

的HTML

<div class="image">
    <img class="test" src="http://fc00.deviantart.net/fs71/f/2011/322/e/2/e292b11555866aec8666ded2e63ee541-d4gl4vg.png" alt="leopard" />
</div>

的CSS

.image {
    position:relative;
    width:340px;
    background:orange;
}
.image:before, .image:after {
    border-left: 20px solid white;
    content: "";
    left: 0;
    position: absolute;
    width: 0;
}
.image:before {
    border-bottom: 5px solid transparent;
    height: 34px;
    top: 0;
}
.image:after {
    top: 39px;
    bottom:0;
    border-top: 5px solid transparent;
}
.test {
    display:block;
    width:100%;
}

这是一个小提琴。 http://jsfiddle.net/yL7Hg/

编辑：如果有帮助，由于我的设计工作原理，我只需要左上角具有半径即可。我可以在.image上使用边框半径来获得右上角的图像。

最佳答案

这里是：

http://jsfiddle.net/HYgbu/

<div class="mask">
<img class="second" src="http://fc00.deviantart.net/fs71/f/2011/322/e/2/e292b11555866aec8666ded2e63ee541-d4gl4vg.png" alt="leopard" /></div>

我知道这不是一个完美的解决方案，但这仍然是我的第一个想法。