三角形CSS按钮图像

Question

我试图在我的网站上创建一个闪屏页面，其中包含两个大按钮，每个按钮都是一个直角三角形，并且两个按钮通过最长的一边连接在一起，形成一个正方形。基本上我想知道如何在css中创建非矩形按钮。

虽然我不确定是否可能，但是我在网上找不到任何关于这种非矩形按钮类似技术的解释，而且我并不特别擅长css。希望能给我指点方向！

- Ryan Connolly

---

你尝试过在谷歌上搜索“CSS三角形”吗？ - j08691

这个问题解释了CSS三角形的工作原理，应该会有所帮助：https://dev59.com/Ymw05IYBdhLWcg3wuUAL - web-tiki

Answer 1

一道非常久远（未解答的）问题值得回答。

您可以在嵌套的 div 元素中使用父元素设置为 hidden 的 overflow 属性，然后旋转子元素。

以下是一个基本示例：（请注意：此处的 jQuery 仅为演示所需）

$('.tri').click(function() {
  alert("triangle clicked!");
});

.wrap {
  height: 200px;
  width: 200px;
  position: relative;
  overflow: hidden;
  margin: 2px auto;
}
.wrap .tri {
  position: absolute;
  height: 70%;
  width: 70%;
  background: tomato;
  transform-origin: bottom left;
  bottom: 0;
  transition: all 0.6s;
  left: 0;
  cursor: pointer;
  transform: rotate(45deg);
}
.wrap2 {
  transform: rotate(180deg);
}
.wrap .tri:hover {
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="tri"></div>
</div>
<div class="wrap wrap2">
  <div class="tri"></div>
</div>

- jbutler483