Короче, вот что у меня в итоге получилось, не могу допереть как поставить бордер и закруглить углы. Может кто нибудь знает как делать дальше??? http://jsfiddle.net/Gasherez/XjNBs/
|
Не, это не вариант. Такое и без svg можно, даже без transform.
|
Может это вообще нереально сделать?))
|
Вот набросок svg(работает в ff и ie), в хроме не завелось но лень думать в чём проблема, может позже.
<!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 {
display: inline-block;
position: relative;
margin:20px;
}
.tooltip-svg {
overflow: visible;
top: 0px;
left: 0px;
position: absolute;
}
.tooltip-content {
position: relative;
padding:0.6em;
text-align: left;
color: #fff;
font-size:18pt;
text-shadow: 0 0 2px black;
}
</style>
</head>
<body>
<div class="tooltip">
<svg width="100%" height="100%" class="tooltip-svg">
<defs>
<polyline id="tooltip-arrow" points="-1,-15 15,0 -1,15" />
<pattern id="tooltip-background" patternUnits="userSpaceOnUse" width="1304" height="847">
<image xlink:href="http://fc08.deviantart.net/fs71/f/2014/054/2/8/damages_by_destinyblue-d77jr43.jpg" x="0" y="0" width="1304" height="847" />
</pattern>
<mask id="tooltip-mask">
<g id="tooltip-box" fill="#fff">
<use xlink:href="#tooltip-arrow" x="100%" y="50%"/>
<rect x="0" y="0" rx="20" ry="20" width="100%" height="100%" />
</g>
</mask>
</defs>
<use xlink:href="#tooltip-box" stroke="black" stroke-width="4"/>
<rect x="0" y="0" width="120%" height="100%" fill="url(#tooltip-background)" mask="url(#tooltip-mask)" />
</svg>
<div contentEditable="true" class="tooltip-content">Продавай человеку рыбу <br>и будешь сыт каждый день,<br> научи человека ловить рыбу<br> и будешь сыт всего лишь раз.</div>
</div>
</body>
</html>
|
Пофиксил для хрома, однако во-первых надо будет обрезать выпирающий кусок svg(прозрачный), во-вторых в хроме всё-равно почему-то не работает динамическая отрисовка маски(по условиям задачи это не имеет значения, ибо при первой отрисовке всё ок, но неприятно).
<!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 {
display: inline-block;
position: relative;
margin:20px;
}
.tooltip-svg {
overflow: visible;
top: 0px;
left: 0px;
height: 200%;
width: 200%;
position: absolute;
}
.tooltip-content {
position: relative;
padding:0.6em;
text-align: left;
color: #fff;
font-size:18pt;
text-shadow: 0 0 2px black;
}
</style>
</head>
<body>
<div class="tooltip">
<svg width="200%" height="200%" class="tooltip-svg" >
<defs>
<polyline id="tooltip-arrow" points="-1,-15 15,0 -1,15" />
<pattern id="tooltip-background" patternUnits="userSpaceOnUse" width="1304" height="847">
<image xlink:href="http://fc08.deviantart.net/fs71/f/2014/054/2/8/damages_by_destinyblue-d77jr43.jpg" x="0" y="0" width="1304" height="847" />
</pattern>
<mask id="tooltip-mask">
<g id="tooltip-box" fill="#fff" transform="translate(2,2)">
<use xlink:href="#tooltip-arrow" x="50%" y="25%"/>
<rect x="0" y="0" rx="20" ry="20" width="50%" height="50%" />
</g>
</mask>
</defs>
<use xlink:href="#tooltip-box" stroke="black" stroke-width="4"/>
<rect x="0" y="0" width="100%" height="100%" fill="url(#tooltip-background)" mask="url(#tooltip-mask)" />
</svg>
<div contentEditable="true" class="tooltip-content">Продавай человеку рыбу <br>и будешь сыт каждый день,<br> научи человека ловить рыбу<br> и будешь сыт всего лишь раз.</div>
</div>
</body>
</html>
Кому надо, тот пускай и допиливает.) |
Супер!!! +++++++++++++++++++++
|
| Часовой пояс GMT +3, время: 00:05. |