<div class="arrow left"></div>
<div class="arrow right"></div>
<div class="arrow-triangle right"></div>
<div class="arrow-triangle left"></div>
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
> div {
margin: 2vh;
}
}
.arrow {
position: relative;
color: #333;
font-family: Arial sans-serif;
font-size: 2em;
text-decoration: none;
padding: 0.5em;
}
.arrow:before, .arrow:after {
content:"";
background: #333;
border-radius: 0.2em;
display: block;
height: 0.25em;
position: absolute;
right: 0;
width: 1em;
}
.arrow.left:before, .arrow.left:after {
left: 0;
}
.arrow.left:before {
top: 0.065em;
}
.arrow.left:after, .arrow.left:before,.arrow.right:before {
transform: rotate(45deg);
}
arrow.left:before, .arrow.right:before, .arrow.left:after {
top: 0.65em;
}
.arrow.left:after, .arrow.right:after {
bottom: 0.66em;
transform: rotate(-45deg);
}
.arrow:hover, #arrow:focus {
color: #c00;
}
.arrow:hover:before, .arrow:hover:after, .arrow:focus:before, .arrow:focus:after {
background: #c00;
}
.arrow-triangle {
position: relative;
background-color: #333;
text-align: left;
margin: 1.2em;
}
.arrow-triangle:before,
.arrow-triangle:after {
content: '';
position: absolute;
background-color: inherit;
}
.arrow-triangle,
.arrow-triangle:before,
.arrow-triangle:after {
width: 2em;
height: 2em;
border-top-right-radius: 30%;
}
.arrow-triangle.left {
transform: rotate(-90deg) skewX(-30deg) scale(1,.866);
}
.arrow-triangle.right {
transform: rotate(-30deg) skewX(-30deg) scale(1,.866);
}
.arrow-triangle:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.arrow-triangle:after {
transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.