title: Change angle of Div to greater than 90 degrees and keep css Hover effect
body: <p>I have the below code, which creates a 90 degree downwards pointing triangle using CSS only. I've also added a hover effect to it, so that when someone hovers over it, the opacity changes from 0.7 to 1. </p>
  
  <p>What I am wondering... Is is possible to increase the angle of the downwards pointing angle, and still keep the hover effect? I've found an example that allows me to create a 'Chevron' shape using the :before and :after elments of a div. But this then causes some issues with the hover effect. Can you use pure CSS to style ONE element to look like a downwards pointing arrow, greater than 90 degrees? </p>
  
  <p>Any help appreciated :) </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="linkHolder"&gt;
      &lt;a id="more" title="More information about Dabble" href="#"&gt;
              &lt;div class="arrow-down"&gt;&lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>#linkHolder {
      width: 150px;
      height: 150px;
      margin: auto;
      position: relative;
      display: flex;
  }
  #more {
      width: 100%;
      display: flex;
      position: relative;
  }
  
  .arrow-down {
      width: 80px; 
      height: 80px; 
      border-right: 10px solid rgba(37, 198, 94, 0.7);
      border-bottom: 10px solid rgba(37, 198, 94, 0.7);
      margin: auto;
      padding:0;
      margin-top: 50px;
      transform:rotate(45deg);
      transition: 1s ease;
      -webkit-transition: ease 1s;
      -moz-transition: ease 1s;
      -o-transition: ease 1s;
      z-index:10;
      display: flex;
      position: relative;
  }
  .arrow-down:hover,
  .arrow-down:focus {
      border-right: 10px solid rgba(37, 198, 94, 1);
      border-bottom: 10px solid rgba(37, 198, 94, 1);
  }
  </code></pre>