Question

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

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

Answer 1

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

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

以下是一个基本示例:( 请注意：仅在演示时需要jQuery）

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

三角css按钮图像

1 个答案: