css - 限制对特定形状的点击

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属性，以便链接实际上具有菱形形状，因此在该形状之外无法单击(请参见以下演示和屏幕截图)。然后，您需要对内容进行“反变换”以使其不倾斜。

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