[HelloBug] CSS Triangle

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="normal"></div>
    <span class="triangle">▲</span>
    <span class="triangle">▼</span>
    <span class="triangle">◀</span>
    <span class="triangle">▶</span>
    <span class="unicode"></span>
    <div class="triangle-with-shadow"></div>
  </body>

</html>

.normal {
    width: 0;
    height: 0;
    border: 40px solid red;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.unicode:after {
    content: '\25BC';
    color: red;
    font-size: 40px;
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.7);
}
.triangle {
    color: red;
    font-size: 40px;
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.7);
}
.triangle-with-shadow {
   width: 100px;
   height: 50px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 16px 10px -17px rgba(0,0,0,0.6);
}
.triangle-with-shadow:after {
   content: "";
   position: absolute;
   width: 50px;
   height: 50px;
   top: 25px;
   left: 25px;
   transform: rotate(45deg);
   -webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
   background: red;
   box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);
}