按钮可点击区域编辑

Question

如何禁用此按钮可点击区域的右半部分？

HTML

ul li {
  padding: 10px;
  background-color: #333;
}

@for $i from 1 through 10 {
  li.list-item-#{$i} {
     background-color: lighten(#333, $i*5%);
  }  
}

.button {
  border-color: #000000;
  border-width: 0 3px 3px 0;
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0);
  transform: rotate(135deg);
}

Answer 1

你可以试试这个（我添加了边框和背景，所以我们可以看到它只有一半）：

.button {
  border-color: #000000;
  border-width: 0 3px 3px 0;
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0);
  background:red; /* Remove this background */
  transform: rotate(135deg);
  cursor: pointer;
}

.but {
  display: inline-block;
  border: 1px solid #000; /* Remove this border later */
  padding: 5px;
  width: 12px;
  overflow: hidden;
}

<span class="but">
<input class="button" type="button" />
</span>