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

#css #css3

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



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

border: 20px solid transparent; 
border-left: 20px solid green; 
border-top: 20px solid green;


В треугольнике часть картинки находится а не просто цвет. Вообщем как сделать такую
рамку на css?
    

Ответы

Ответ 1

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

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