<div class="arrow-up"></div>
.arrow-up {
width: 36px;
height: 38px;
background: #eb5c58;
position: relative;
border-radius: 2px;
}
.arrow-up:after,
.arrow-up:before {
content: "";
display: block;
position: absolute;
left: 6px;
top: 6px;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #fff;
}
.arrow-up:after {
top: 18px;
border-left-color: #fff;
border-right-color: #fff;
border-bottom-color: #eb5c58;
}
.arrow-up:hover {
background: red
}
.arrow-up:hover:after {
border-bottom-color: red;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.