html - CSS两栏模式，防止单击带有剪切路径的按钮？

在我们这边，我们有一个“卡片”集合，其中的href使用剪切路径显示为按钮，以使其变为非矩形。这可以正常工作，但是一旦我们将父容器更改为两列，我们将无法再单击链接。

禁用剪切路径或两栏模式可以使链接可单击，但是我们希望结合使用效果器。

body {
  font-family: Arial, Helvetica, sans-serif;
}

ul {
  list-style: none;
  column-count: 2;
}

ul>li {
  display: block;
  margin-bottom: 10px;
}

.card {
  border: solid 1px gray;
  width: 300px;
  height: 220px
}

.abtn {
  font-size: 16px;
  border-radius: .7rem;
  color: rgb(255, 255, 255) !important;
  line-height: 6.9rem;
  background-color: rgb(19, 92, 189);
  width: 16rem;
  height: 8rem;
  -webkit-clip-path: polygon(2% 42%, 100% -5%, 100% 100%, 0 100%, 0 46%);
  clip-path: polygon(2% 42%, 100% -5%, 100% 100%, 0 100%, 0 46%);
  float: right;
  padding-top: 1.5rem;
  font-weight: bold;
  -webkit-transition: all .3s;
  transition: all .3s;
  text-align: center;
}

<ul>

  <li><div class="card"><a class="abtn" href="#">Click Me</a></div></li>
  <li><div class="card"><a class="abtn" href="#">Click Me</a></div></li>
  <li><div class="card"><a class="abtn" href="#">Click Me</a></div></li>
  <li><div class="card"><a class="abtn" href="#">Click Me</a></div></li>
  <li><div class="card"><a class="abtn" href="#">Click Me</a></div></li>
  <li><div class="card"><a class="abtn" href="#">Click Me</a></div></li>

</ul>

我已经在macOS上的Chrome和Safari中测试了此功能，并在其中看到了这种行为。它可以在Firefox中按预期工作。

上下文中的代码：https://jsfiddle.net/045q82ve/2/

奇怪的是，它在JSFiddle中部分起作用，而我的示例在独立的HTML页面中不起作用。我说的是部分原因，因为只有第一个按钮的行为似乎与预期的一样。该示例可在Firefox中正常运行。

最佳答案

将背景和clip-path移动到绝对定位的伪元素（::before），然后使用z-index: -1将其放置在链接下方：

body {
  font-family: Arial, Helvetica, sans-serif;
}

ul {
  list-style: none;
  column-count: 2;
  border: solid 1px blue;
}

ul>li {
  display: block;
  margin-bottom: 10px;
}

.card {
  border: solid 1px gray;
  width: 300px;
  height: 220px;
  text-align: right;
}

.abtn {
  display: inline-block;
  position: relative;
  font-size: 16px;
  border-radius: .7rem;
  color: rgb(255, 255, 255) !important;
  line-height: 6.9rem;
  width: 16rem;
  height: 8rem;
  padding-top: 1.5rem;
  font-weight: bold;
  transition: all .3s;
  text-align: center;
}

.abtn::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-clip-path: polygon(2% 42%, 100% -5%, 100% 100%, 0 100%, 0 46%);
  clip-path: polygon(2% 42%, 100% -5%, 100% 100%, 0 100%, 0 46%);
  background: rgb(19, 92, 189);
  content: '';
}

<ul>
  <li><div class="card"><a class="abtn" href="#">Click Me</a></div></li>
  <li><div class="card"><a class="abtn" href="#">Click Me</a></div></li>
  <li><div class="card"><a class="abtn" href="#">Click Me</a></div></li>
  <li><div class="card"><a class="abtn" href="#">Click Me</a></div></li>
  <li><div class="card"><a class="abtn" href="#">Click Me</a></div></li>
  <li><div class="card"><a class="abtn" href="#">Click Me</a></div></li>
</ul>