将Div的角度更改为大于90度并保持css悬停效果

Question

我有以下代码，它仅使用CSS创建一个90度向下指向三角形。我还为它添加了一个悬停效果，这样当有人将鼠标悬停在它上面时，不透明度会从0.7变为1.

我在想...是否可以增加向下指向角度的角度，并仍然保持悬停效果？我找到了一个例子，允许我使用：div的前面和后面的部分来创建一个'雪佛龙'形状。但这会导致悬停效应的一些问题。你可以使用纯CSS来设置一个元素的样式，看起来像一个向下指向的箭头，大于90度吗？

任何帮助赞赏:)

HTML：

<div id="linkHolder">
    <a id="more" title="More information about Dabble" href="#">
            <div class="arrow-down"></div>
    </a>
</div>

和CSS：

#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);
}