三角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>