css - 三角形 css 按钮图像

Question

我正在尝试在我的网站上制作一个带有 2 个大按钮的启动页面，每个按钮都是直角三角形，并且都通过最长边连接以创建一个正方形。基本上我正在寻找如何在css中制作非矩形按钮。

我不知道这是否可能，并且在网上找不到任何解释非矩形按钮的类似技术的东西，而且我对 css 并不是特别熟练。朝着正确的方向推动将非常有帮助！

Answer 1

一个非常古老的（未回答的问题）值得回答。

您可以使用嵌套的 div 元素，其中父元素的溢出设置为隐藏，子元素旋转。

这是一个基本示例：（请注意： 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>