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

Post Reply
confiscate
Турист
Турист
Posts: 540
Joined: Sat Jan 27, 2007 6:45 am
Answers: 10
Contact:

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

Post by confiscate » Sun Feb 19, 2017 8:11 pm

Здравейте,

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

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

Поздрави

User avatar
teroristd
Много Редовен
Много Редовен
Posts: 1769
Joined: Thu Feb 18, 2010 11:50 am
Answers: 83

Post by teroristd » Mon Feb 20, 2017 5:35 am

Просто изрязваш картинката на фотошоп и я правиш с прозрачен бекграунд png.

User avatar
anonimen
Много Редовен
Много Редовен
Posts: 1523
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 162
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Mon Feb 20, 2017 11:20 am

Понеже не искам да поствам lmgtfy линкчета, макар че едвам ме свърта - https://css-tricks.com/snippets/css/css-triangle/

joTunkiq
Потребител
Потребител
Posts: 825
Joined: Tue Dec 25, 2012 10:03 am
Answers: 142
Contact:

Post by joTunkiq » Mon Feb 20, 2017 5:08 pm

Като гледам частта, в която е снимката и как е съединена със "поинтъра", най -вероятно това е 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: :?:

Post Reply