我试图在我的网站上创建一个闪屏页面,其中包含两个大按钮,每个按钮都是一个直角三角形,并且两个按钮通过最长的一边连接在一起,形成一个正方形。基本上我想知道如何在css中创建非矩形按钮。
虽然我不确定是否可能,但是我在网上找不到任何关于这种非矩形按钮类似技术的解释,而且我并不特别擅长css。希望能给我指点方向!
虽然我不确定是否可能,但是我在网上找不到任何关于这种非矩形按钮类似技术的解释,而且我并不特别擅长css。希望能给我指点方向!
一道非常久远(未解答的)问题值得回答。
您可以在嵌套的 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>