CSS Arrow

by karim79

HTML

<div class="arrow-container">
    <div class="arrow"></div>
</div>

CSS

.arrow, .closed-arrow {
    position: relative;
    top: 2px;
    background: transparent;
    transition-property: border-width, top;
    transition-duration: 300ms, 300ms;
    margin: 0 auto;
    width: 10px;
    height: 10px;
    border: solid rgba(88, 90, 92, 1);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.closed-arrow {
    top: 14px;
    border-width: 2px 0 0 2px;
}
.closed-arrow-container:hover .closed-arrow {
    top: 2px;
    border-width: 0 2px 2px 0;
}
.arrow-container:hover .arrow {
    top: 14px;
    border-width: 2px 0 0 2px;
}
.closed-arrow-container, .arrow-container {
    width: 50px;
    height: 40px;
    background: transparent;
    margin: auto;
}