Geek asks and answers

Image of triangular css button

I am trying to create a splash page on my website using two large buttons, each of which has a right-angled triangle, and both are joined by the longest side to create a square. I am mainly looking to learn how to make non-rectangular buttons in css.

I have no idea if this is possible, although I cannot find anything on the Internet, explaining similar methods for buttons that are not rectangular, and I am not particularly good at css. Pushing in the right direction would be very helpful!

+5
source share
1 answer

A very old (unanswered question) deserves an answer.

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>
Hide result
+1

More articles:


All Articles