Controlling the z-index in CSS to make a play icon

Question

hope this is a simple one. I am trying to create a simple play icon and hope to do it using two span tags. One span tag will be used to mask the second that is rotated. unfortunately I cannot get the z-index to work and so I am not getting the mask.

Note: in the trial code I have set the mask as grey to see the issue.

.one {
  background-color: #999;
  display: inline-block;
  min-width: 1.2rem;
  min-height: 1.6rem;
  z-index: 10;
}

.two {
  background-color: #000;
  display: inline-block;
  min-width: 1.2rem;
  min-height:1.2rem;
  z-index: -1;
}

.two {
  transform: rotate(45deg);
  margin-left: -15px;
  margin-bottom: .185rem;
}

<div>
  <span class="one"></span>
  <span class="two"></span>
</div>