<h1>A collection of CSS only arrows.</h1>
<div class="explanation">
<p>Here we have a collection of CSS only arrows created using borders only.</p>
</div>
<div class="example">
<div class="arrow up"></div>
<div class="arrow down"></div>
<div class="arrow left"></div>
<div class="arrow right"></div>
<div class="arrow downLeft"></div>
<div class="arrow upRight"></div>
<div class="arrow upLeft"></div>
<div class="arrow downRight"></div>
</div>
@mixin arrow($type:null, $size:"14px", $color:"#000") {
width: 0;
height: 0;
$size: unquote($size);
$color: unquote($color);
@if $type=="up" {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid $color;
}
@elseif $type=="down" {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-top: $size solid $color;
}
@elseif $type=="left" {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-right: $size solid $color;
}
@elseif $type=="right" {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $color;
}
@elseif $type=="downLeft" {
border-top: $size solid transparent;
border-bottom: 0 solid transparent;
border-left: $size solid $color;
border-right: 0 solid $color;
}
@elseif $type=="downRight" {
border-top: $size solid transparent;
border-bottom: 0 solid transparent;
border-left: 0 solid $color;
border-right: $size solid $color;
}
@elseif $type=="upLeft" {
border-top: 0 solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $color;
border-right: 0 solid $color;
}
@elseif $type=="upRight" {
border-top: 0 solid transparent;
border-bottom: $size solid transparent;
border-left: 0 solid $color;
border-right: $size solid $color;
}
}
.arrow {
margin: 10px;
float: left;
&.up {
@include arrow("up");
}
&.down {
@include arrow("down");
}
&.left {
@include arrow("left");
}
&.right {
@include arrow("right");
}
&.downLeft {
@include arrow("downLeft");
}
&.downRight {
@include arrow("downRight");
}
&.upLeft {
@include arrow("upLeft", "50px", "#c92228");
}
&.upRight {
@include arrow("upRight");
}
}
/* For aesthetics only ------------------------------------------*/
body {
margin: 0;
font-family: Segoe,
"Segoe UI",
"DejaVu Sans",
"Trebuchet MS",
Verdana,
sans-serif;
}
h1 {
font: 200 1.2em "Segoe UI Light",
"DejaVu Sans",
"Trebuchet MS",
Verdana,
sans-serif;
font-weight: 200;
color: #fff;
background: #039be4;
padding: 20px;
margin: 0;
border-bottom: 10px solid #ccc;
strong {
font-family: "Segoe UI Black";
font-weight: normal;
}
}
.explanation {
padding: 20px 40px;
float: right;
background: #e64a19;
-webkit-box-shadow: inset 0 30px 3px 0 rgba(0, 0, 0, 0.5);
box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
border-bottom: 10px solid #ccc;
max-width: 300px;
p {
color: #fff;
font-size: 0.8rem;
}
}
View Compiled
This Pen doesn't use any external CSS resources.