Question

正在做一个小项目，我想在网格中有三角形。理想情况下，我会避免使用图片，因为我希望每个图片都包含动态内容并可以独立点击。

我可以看到网格的“外观”，但是我使用的是定位，这可以防止一个或另一个直角三角形被单击。

http://jsfiddle.net/dkjfc39m/2/这就是我想要的（ish），只是规模更大。

HTML：

<div class="buttonBlock">
  <a class="buttonOdd"></a>
  <a class="buttonEven"></a>
  <a class="buttonOdd"></a>
  <a class="buttonEven"></a>
  <a class="buttonOdd"></a>
  <a class="buttonEven"></a>
</div>
<div class="buttonBlock">
  <a class="buttonOdd"></a>
  <a class="buttonEven"></a>
  <a class="buttonOdd"></a>
  <a class="buttonEven"></a>
  <a class="buttonOdd"></a>
  <a class="buttonEven"></a>
</div>

CSS：

.buttonOdd {
    border-bottom: 100px solid #0000ff;
    border-right: 100px solid transparent;
    display: inline-block;
    position: absolute;
}

.buttonEven {
    border-top: 100px solid #0000dd;
    border-left: 100px solid transparent;
    display: inline-block;
}

Answer 1

如果我理解正确，那么您想做这样的事情

.buttonBlock {
  overflow: hidden;
  height: 100px;
  width: 100px;
}
.buttonOdd {
  width: 200px;
  height: 80px;
  background-color: #0000ff;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  z-index: 1;
}
.buttonEven {
  height: 100px;
  width: 100px;
  background-color: #0000dd;
  position: initial;
  margin-top: -80px;
}

<h3>Click on the Top or Bottom of the block</h3>
<div class="buttonBlock">
  <div class="buttonOdd" onclick="alert('Top side clicked')"></div>
  <div class="buttonEven" onclick="alert('Bottom side clicked')"></div>
</div>

基本上，我以buttonOdd角旋转45deg元素。然后，我用buttonBlock掩盖了多余的部分。另外，我还必须将其从a标记更改为div，以便呈现。

由于您希望在网格中将其包含在内，因为我的新方法可能不适用于您的方法。

.buttonBlock {
  overflow: hidden;
  height: 100px;
  width: 100px;
}

.buttonOdd {
  width: 200px;
  height: 80px;
  background-color: #0000ff;
  ;
  transform: rotate(45deg);
  z-index: 1;
}

.buttonEven {
  height: 100px;
  width: 100px;
  background-color: #0000dd;
  position: initial;
  margin-top: -80px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
tr {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

<h3>Click on the Top or Bottom of a cell</h3>
<table>
  <tr>
    <td>
      <div class="buttonBlock">
        <div class="buttonOdd" onclick="alert('Top side clicked on cell 1:1')"></div>
        <div class="buttonEven" onclick="alert('Bottom side clicked on cell 1:1')"></div>
      </div>
    </td>
    <td>
      <div class="buttonBlock">
        <div class="buttonOdd" onclick="alert('Top side clicked on cell 2:1')"></div>
        <div class="buttonEven" onclick="alert('Bottom side clicked on cell 2:1')"></div>
      </div>
    </td>
    <td>
      <div class="buttonBlock">
        <div class="buttonOdd" onclick="alert('Top side clicked on cell 3:1')"></div>
        <div class="buttonEven" onclick="alert('Bottom side clicked on cell 3:1')"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="buttonBlock">
        <div class="buttonOdd" onclick="alert('Top side clicked on cell 1:2')"></div>
        <div class="buttonEven" onclick="alert('Bottom side clicked on cell 1:2')"></div>
      </div>
    </td>
    <td>
      <div class="buttonBlock">
        <div class="buttonOdd" onclick="alert('Top side clicked on cell 2:2')"></div>
        <div class="buttonEven" onclick="alert('Bottom side clicked on cell 2:2')"></div>
      </div>
    </td>
    <td>
      <div class="buttonBlock">
        <div class="buttonOdd" onclick="alert('Top side clicked on cell 3:2')"></div>
        <div class="buttonEven" onclick="alert('Bottom side clicked on cell 3:2')"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="buttonBlock">
        <div class="buttonOdd" onclick="alert('Top side clicked on cell 1:3')"></div>
        <div class="buttonEven" onclick="alert('Bottom side clicked on cell 1:3')"></div>
      </div>
    </td>
    <td>
      <div class="buttonBlock">
        <div class="buttonOdd" onclick="alert('Top side clicked on cell 2:3')"></div>
        <div class="buttonEven" onclick="alert('Bottom side clicked on cell 2:3')"></div>
      </div>
    </td>
    <td>
      <div class="buttonBlock">
        <div class="buttonOdd" onclick="alert('Top side clicked on cell 3:3')"></div>
        <div class="buttonEven" onclick="alert('Bottom side clicked on cell 3:3')"></div>
      </div>
    </td>
  </tr>
</table>

网格中的可点击三角形

1 个答案: