Page 1 of 1

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

Posted: Sun Feb 19, 2017 8:11 pm
by confiscate
Здравейте,

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

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

Поздрави

Posted: Mon Feb 20, 2017 5:35 am
by teroristd
Просто изрязваш картинката на фотошоп и я правиш с прозрачен бекграунд png.

Posted: Mon Feb 20, 2017 11:20 am
by anonimen
Понеже не искам да поствам lmgtfy линкчета, макар че едвам ме свърта - https://css-tricks.com/snippets/css/css-triangle/

Posted: Mon Feb 20, 2017 5:08 pm
by joTunkiq
Като гледам частта, в която е снимката и как е съединена със "поинтъра", най -вероятно това е canvas елемент, защото ако ги направиш по-отделно няма да можеш(или ще можеш, но ще бъде много трудно) да наместиш снимката с точните пропорции и на точното място, ако е фон на кутията и на триъгълника.

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

Нещо такова представлява зареждането:

Code: Select all

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: :?: