рамка с треугольником

Насколько реально сделать вот такую рамку на css

Где треугольник это часть картинки и картинка может быть любой другой т.е. я хочу сказать, что добавить такой треугольник не подойдет здесь
border: 20px solid transparent; border-left: 20px solid green; border-top: 20px solid green;
В треугольнике часть картинки находится а не просто цвет. Вообщем как сделать такую рамку на css?

Ответ

Подсмотрев одну идею в интернете, я немного попробовал помудрил и получилось вот что:
html:

css:
/* photo original width: 604px; photo original height: 592px; */ .tooltip-wrap { position: relative; width: 450px; }
.tooltip-content { position: relative; height: 200px; border: 3px solid blue; border-radius: 20px; overflow: hidden; }
.tooltip-triangle { position: absolute; overflow: hidden; margin: 0 auto; width: 300px; height: 156px; border-left: 3px solid blue; bottom: -153px; left: 78px; }
.tooltip-triangle-wrap { width: 604px; height: 592px; }
.tooltip-triangle-wrap { overflow: hidden; position: absolute;
transform: skewX(-55.98deg); border-right: 3px solid blue; }
.tooltip-triangle-wrap:first-child { transform-origin: 100% 0; position: absolute; bottom: -234px; left: -78px; }
.tooltip-triangle-wrap:last-child { right: -.25em; transform-origin: 0 100%; }
.tooltip-triangle-wrap img, .tooltip-triangle-wrap:after { transform: skewX(55.98deg); transform-origin: inherit; }
Пример
Вам придется немного адаптировать величины ширины высоты и позиций для себя.
По идее, немного поманипулировав шириной и высотой тултипа, и треугольника, а также расположением треугольника и картинки внутри как вам надо - можно будет просто скриптом менять картинки как вам надо.
Если хотите, то можете попробовать оттолкнуться от этого примера: jsfiddle.net