JSFiddle - React, Tailwind, and code Playground

by akogch

HTML

<h1>Hover the triangle!</h1>

<!-- triangle start -->
<div class="tr"><a href="#"></a></div>
<!-- triangle end -->

<p>
  Notice the hover state is triggered only <strong>inside</strong> the triangle
  shape
</p>
<p></p>

CSS

.tr {
  width: 40%;
  padding-bottom: 28.2842712474619%;
  /* = width / sqrt(2) */
  position: relative;
  overflow: hidden;
}

.tr a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 122, 199, 0.7);
  transform-origin: 0 100%;
  transform: rotate(45deg);
  transition: background-color 0.3s;
}

/** hover effect **/

.tr a:hover {
  background: rgba(255, 165, 0, 0.7);
}

/* FOLLOWING JUST FOR THE DEMO */

html {
  display: table;
  width: 100%;
  height: 100%;
}

body {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  font-family: "Raleway", arial, sans-serif;
  letter-spacing: 0.12em;
}

.tr {
  margin: -7% auto 0;
}

strong {
  color: #ffa500;
}

h1 {
  font-size: 2em;
  padding-bottom: 0;
  margin-bottom: 0;
}

body {
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.45) 1%,
    rgba(12, 12, 12, 0.91) 61%,
    rgba(19, 19, 19, 0.91) 100%
  );
  background: -webkit-gradient(
    radial,
    center center,
    0px,
    center center,
    100%,
    color-stop(0%, rgba(0, 0, 0, 0.45)),
    color-stop(1%, rgba(0, 0, 0, 0.45)),
    color-stop(61%, rgba(12, 12, 12, 0.91)),
    color-stop(100%, rgba(19, 19, 19, 0.91))
  );
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.45) 1%,
    rgba(12, 12, 12, 0.91) 61%,
    rgba(19, 19, 19, 0.91) 100%
  );
  background: -o-radial-gradient(
    center,
    ellipse cover,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.45) 1%,
    rgba(12, 12, 12, 0.91) 61%,
    rgba(19, 19, 19, 0.91) 100%
  );
  background: -ms-radial-gradient(
    center,
    ellipse cover,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.45) 1%,
    rgba(12, 12, 12, 0.91) 61%,
    rgba(19, 19, 19, 0.91) 100%
  );
  background:...