Изобразал что-то без svg. Но тут выравнивание bg привязано к
right center. Вообще по-моему я что-то перемудрил.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin:0; padding:0;}
html,body{
width:100%;
height:100%;
background-image:url(http://fc01.deviantart.net/fs31/f/2008/215/f/f/texture_1_by_Texture_Mania.jpg);
background-size:cover;
text-align: center;
}
.tooltip{
background-image: url(http://fc09.deviantart.net/fs71/i/2010/290/a/6/seamless_wet_grass_texture_by_hhh316-d30xrvv.jpg);
background-repeat: no-repeat;
background-position: -1000% -1000%;
margin: 25px auto;
position: relative;
display:inline-block;
}
.tooltip-content{
z-index:2;
position:relative;
padding: 1em;
text-align: left;
color: #fff;
font-size:18pt;
text-shadow: 0 0 2px black;
}
.tooltip-backgrond{
position:absolute;
top:0px;
right:0px;
left:0px;
bottom:0px;
background-image: inherit;
overflow:hidden;
border: 5px solid #fff;
border-radius: 15px;
}
.tooltip-backgrond:after{
content:'';
display:block;
position:absolute;
right:-125px; /* arrow:after_right - arrow_width/2 */
top:0px;
left:0px;
bottom:0px;
background-image: inherit;
background-position: right center;
}
.tooltip-arrow{
position: absolute;
right:0;
top:50%;
transform: rotate(45deg);
-webkit-transform:rotate(45deg);
background-image: inherit;
background-repeat: no-repeat;
background-position: -1000% -1000%;
overflow: hidden;
margin-right:-25px; /* -width/2 */
margin-top:-30px; /* -height/2 - border*/
width: 50px;
height: 50px;
border-right: 5px solid #fff;
border-top: 5px solid #fff;
border-left: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.tooltip-arrow:after{
content:'';
display:block;
background-image: inherit;
background-position: right center;
transform: rotate(-45deg);
-webkit-transform:rotate(-45deg);
position:absolute;
top:-100px; /* больше чем (sqrt(width^2 + height^2) - width)/2 =) */
right:-100px;
left:-100px;
bottom:-100px;
}
</style>
</head>
<body>
<div class="tooltip">
<div class="tooltip-backgrond"></div>
<div class="tooltip-arrow"></div>
<div class="tooltip-content" contenteditable="true">
Потом отаку настолько погрязли<br> в поклейке фигурок гандамов, что оказалось,<br> что действительность за окном<br> для них гораздо более неизведанный предмет,<br> чем космос, в котором Белая База<br> бороздит ватаги Заку,<br> и родился жанр повседневность.
</div>
</div>
</body>
</html>