Проблем при кодирането на дизайн

confiscate

Registered
Здравейте,

Бихте ли ми дали насоки, как би се кодирал такъв дизай. Затруднява ме този триъгълен pointer отдясно на снимката. Как би се постигнал ?


Благодаря предварително!

Поздрави
 
Понеже не искам да поствам lmgtfy линкчета, макар че едвам ме свърта - https://css-tricks.com/snippets/css/css-triangle/
 
Като гледам частта, в която е снимката и как е съединена със "поинтъра", най -вероятно това е canvas елемент, защото ако ги направиш по-отделно няма да можеш(или ще можеш, но ще бъде много трудно) да наместиш снимката с точните пропорции и на точното място, ако е фон на кутията и на триъгълника.

След като си начертаеш формата на канваса, може да заредиш снимката:

Нещо такова представлява зареждането:
Код:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var w = canvas.width = 256;
var h = canvas.height = 256;
var img = new Image();

img.src = "http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG";
img.onload = function () {
    var pattern = ctx.createPattern(img, "repeat");
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, w, h);
};

Не съм пробвал кода, просто погледнах първият резултат в гугъл.

Ето ти малко помощен материал:
- https://www.youtube.com/watch?v=8rN0WI7hZD8 - custom shapes
- https://www.youtube.com/watch?v=DsKdZd4JfuI - drawing images on canvas
- комбинирано -> https://www.youtube.com/watch?v=N0BNbngr2IY
:idea: :?:
 

Горе