Triangular css button image

Question

I'm trying to make a splash page on my website with 2 large buttons, each a right angled triangle, and both join by the longest side to create a square. Basically I'm looking to find out how to make non-rectangular buttons in css.

I have no idea if this is even possible though, and cannot find anything online explaining similar techniques for buttons which are not rectangular, and i'm not particularly skilled in css. A push in the right direction would be very helpful!

this question explains how css triangles work, it should help : http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work — web-tiki, Nov 24 '14 at 08:15

score 1 · Answer 1 · answered Mar 30 '15 at 11:04

A very old (unanswered question) deserves an answer.

You could use a nested div element in which the parent has an overflow set to hidden, with the child element rotated.

Here is a basic example: (please note: jQuery only required for demo)

$('.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>

Triangular css button image

1 Answers1