三角形css按钮图像

Question

我试图在我的网站上创建一个带有两个大按钮的大页面，每个按钮都是一个直角三角形，它们都以最长的边连接起来，以创建一个正方形。基本上，我想找出如何在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>

​