Ограничете щракването до конкретна форма

CSS решение

Можете да запазите границите на диамантената форма и да направите кликване само върху частта с изображението, като използвате свойствата на css transform. Въпросът е да използвате свойството skew, така че връзката всъщност има форма на диамант и следователно не може да се кликне извън тази форма (вижте следната демонстрация и екранна снимка). След това трябва да "контратрансформирате" съдържанието, така че да не е изкривено.

ДЕМО

екранна снимка:

Подходящ CSS:

a{
    width: 216px;
    height: 250px;
    overflow:hidden;
    display:inline-block;
    background:red;

    -webkit-backface-visibility:hidden; /* to reduce pixelisation on borders in chrome */

    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;


    -webkit-transform: translate(55%,0) rotate(30deg) skewY(30deg);
    -ms-transform: translate(55%,0) rotate(30deg) skewY(30deg);
    transform: translate(55%,0) rotate(30deg) skewY(30deg);
}

.post-wrapper {
    width: 250px;
    height: 432px;
    background: url(http://lorempixel.com/output/people-h-c-250-432-8.jpg) center center;
    background-size: cover; 

    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;

    -webkit-transform:   skewY(-30deg) rotate(-30deg) translate(-50%,0);
    -ms-transform:   skewY(-30deg) rotate(-30deg) translate(-50%,0);
    transform:   skewY(-30deg) rotate(-30deg) translate(-50%,0);
}

Това може лесно да се постигне с SVG пътища и Javascript. Примерното внедряване е както следва:
Създайте прозрачна SVG форма, която покрива областта, която искате да направите кликваща. След това прикачете слушател на кликване към пътя с Javascript.

Примерен Jsfiddle.

HTML:

<div id="status"></div>
<div id="sample_image">
    <svg id="cover" preserveAspectRatio="none">
        <path d="M 70,266 L 196,56 320,266 196,478 z"></path>
    </svg>
</div>

CSS:

#sample_image {
    background-image: url('http://i.stack.imgur.com/m4zEw.png');
    width: 448px;
    height: 701px;
}

#cover {
    width: 100%;
    height: 100%;
}

#cover path {
    fill: transparent;
}

JS:

$('#cover path').on('click', function() {
    //Used only for sample output
    $('#status').append("<span>Click received.</span> ");
})

За чисто HTML/CSS решение можете да добавите празен href върху изображението с фиксирана височина и ширина. Като:

.clickable-href{
    display:inline-block;
    height:100px;
    width:100px;
    background:red; /* remove this to make the anchor transparent */
}

JSFiddle

Или ако това е img таг, тогава добавете relative родител и използвайте position:absolute котвата:

.relative a{
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:100px;
    background:red; /* remove this to make the anchor transparent */
}

JSFiddle

Ще трябва да използвате JavaScript, предполагам. Вземете координатите на щракването. Сравнете, ако са в допустимия диапазон. И ако не са, използвайте return false.

Прочетете: Получаване на позиция на мишката вътре в родителски div с javascript/jQuery

Псевдокод:

element.onclick = function(){
    if(check range here){
        // user clicked in allowed range
    }else{
        // user did not click in allowed range
        return false; // stop event from working
    }
}

Има решение, използващо свойството за преобразуване css3, оставете ви JSfiddle Само с помощта на html и css

Пренаредете етикетите:

<div class="post-wrapper"><a href="/bg#"></a></div>

И css:

.post-wrapper{
    position:relative;
    width: 250px;
    height: 420px;
    float: left;
    background-color: #ddc;
    -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow: hidden;
}
.post-wrapper a{
    display:block;
    position:absolute;
    overflow: hidden;
    width: 400px;
    height: 400px;
    left: -30%;
    top: 2.3%;
    transform: rotate(45deg) scale(.6, .6) skew(10deg, 10deg) translate(0px);
    -webkit-transform: rotate(45deg) scale(.6, .6) skew(10deg, 10deg) translate(0px);
    -moz-transform: rotate(45deg) scale(.6, .6) skew(10deg, 10deg) translate(0px);
    -ms-transform: rotate(45deg) scale(.6, .6) skew(10deg, 10deg) translate(0px);
    -o-transform: rotate(45deg) scale(.6, .6) skew(10deg, 10deg) translate(0px);
}