Речевой пузырь с фоновым изображением, но вот кикер с закругленными углами

Question

Я создаю речевой пузырь, у которого есть фон в маленьком треугольнике, но единственная проблема в том, что ему также нужны закругленные углы. Я не совсем уверен, как это сделать, но любой взлом или что-то будет оценено по достоинству.

Вот что у меня есть

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/

EDIT: Если это помогает, мне нужен только верхний левый угол, чтобы иметь радиус из-за того, как работает мой проект. Я могу получить верхний правый, используя граничный радиус на .image.

Answer 1

Здесь:

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> 

Я знаю его не идеальное одно решения, но все же, как моя первой мысль.

Answer 2

Попробуйте это: http://www.html5rocks.com/en/tutorials/masking/adobe/

Clipping и маскировка с помощью HTML5.

У этого есть ограничения браузера, поскольку он использует HTML5. Но все последние браузеры поддерживают его.

Answer 3

Этого можно добиться намного проще и со стандартным CSS. Просто установите 2 DIVs, один для стрелки, другой с изображением в качестве фона (вместо IMG тега):

<div class="arrow" ></div> 
<div class="test" ></div> 

и 2 соответствующих классов:

.arrow { 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right:35px solid #1E0C01; 
    float:left; 
    margin-top:50px; 
} 

.test { 
    margin-left:35px; 
    width:340px; 
    height: 240px; 
    background-size:cover; 
    background-image: url("http://fc00.deviantart.net/fs71/f/2011/322/e/2/e292b11555866aec8666ded2e63ee541-d4gl4vg.png"); 

Вот так: http://jsfiddle.net/yL7Hg/5/