将单击限制为特定形状

Question

我在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; 
}

你可以看到图片：

它定义了一种矩形，这是一个可点击的图像，可以重定向到另一个页面，人们可以点击矩形的任何部分，但我只想让它们点击多边形。任何人都知道如何在我的代码中执行此操作？

Fidde

Answer 1

CSS解决方案

您可以使用css变换属性来维护菱形的边界，并仅使图像中的部分可单击。关键是使用skew属性，以便链接实际上具有菱形形状，因此不能在此形状外单击（请参阅下面的演示和屏幕截图）。然后，你需要＆＃34;反转换＆＃34;内容所以它不会倾斜。

<强> DEMO

屏幕截图：

相关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);
}

Answer 2

使用SVG路径和Javascript可以轻松实现。示例实施如下：
创建一个透明的SVG形状，覆盖您想要点击的区域。然后使用Javascript将点击侦听器附加到路径。

Sample 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> ");
})

Answer 3

对于纯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

Answer 4

我想你必须使用JavaScript。获取点击的坐标。匹配，如果它们在允许的范围内。如果不是，请使用return false。

阅读：Getting mouse position inside parent div with 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
    }
}

Answer 5

有一个使用css3转换属性的解决方案，请留下JSfiddle 仅使用html和css

重新排序代码：

<div class="post-wrapper"><a href="#"></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);
}