<div class="container">
<h1>Arrows</h1>
<div class="flexwrap">
<div class="arrowed">
<div class="arrow-1"></div>
</div>
<div class="arrowed">
<div class="arrow-2"></div>
</div>
<div class="arrowed">
<div class="arrow-3"></div>
</div>
<div class="arrowed">
<div class="arrow-4"></div>
</div>
<div class="arrowed">
<div class="arrow-5"></div>
</div>
<div class="arrowed">
<div class="arrow-6"></div>
</div>
<div>
</div>
/* ------------------- */
/* TEMPLATE -- */
/* ----------------- */
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
body {
height: 100%; width: 100%;
background-color: #333;
color: whitesmoke;
font-size: 16px;
font-family: 'Lato';
overflow: hidden;
}
h1 { font-size: 32px; }
.container {
max-width: 960px;
height: 100%;
margin: 0 auto;
padding: 20px;
}
.flexwrap {
display: flex;
flex-wrap: wrap;
}
/* ------------------- */
/* PEN STYLES -- */
/* ----------------- */
/* Arrow holder */
.arrowed {
position: relative;
height: 200px; width: 200px;
margin: 0 20px 20px 0;
border: 1px solid rgba(0,0,0,0.25);
}
/* Just centering the examples */
.arrowed div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
/* -- ARROW 1 -- */
.arrow-1 {
height: 15px; width: 15px;
border: 1px solid tomato;
border-width: 2px 2px 0 0;
transform: rotate(45deg);
}
/* -- ARROW 2 -- */
.arrow-2 {
height: 10px; width: 10px;
border: 1px solid mediumorchid;
border-width: 1px 1px 0 0;
transform: rotate(45deg);
}
.arrow-2:after {
content: '';
display: block;
height: 10px; width: 10px;
border: 1px solid mediumorchid;
border-width: 1px 1px 0 0;
/* Parent's rotation also
rotates transform axis */
/* Add width of border to Y */
transform: translate(5px, -6px);
/* rotate handled by parent */
}
/* -- ARROW 3 -- */
.arrow-3 {
height: 0px; width: 0px;
border: 8px solid;
border-color:
mediumseagreen
mediumseagreen
transparent
transparent;
transform: rotate(45deg);
}
/* -- ARROW 4 -- */
.arrow-4 {
/* duplicate the triange */
position: relative;
height: 0px; width: 0px;
border: 8px solid;
border-color:
darkorange
darkorange
transparent
transparent;
transform: rotate(45deg);
}
.arrow-4:before, .arrow-4:after {
content: '';
display: block;
position: absolute;
/* set up more triangles */
height: 0; width: 0;
/* half the parent border
rounded up */
border: 5px solid;
}
.arrow-4:before {
border-color:
darkorange
transparent
transparent
darkorange;
display: block;
top: -1px; right: 0px;
transform-origin: top right;
transform: rotate(45deg);
}
.arrow-4:after {
border-color:
transparent
darkorange
darkorange
transparent;
top: 0px; right: -1px;
transform-origin: top right;
transform: rotate(-45deg);
}
/* -- ARROW 5 -- */
.arrow-5 {
/* more triangle */
position: relative;
height: 0px; width: 0px;
border: 12px solid;
border-color:
darkcyan
darkcyan
transparent
transparent;
transform: rotate(45deg);
}
.arrow-5:before {
content: '';
position: absolute;
top: 0px; right: 0px;
display: block;
height: 12px; width: 16px;
background-color: darkcyan;
transform:
rotate(-45deg)
translate(2px, 1px);
}
/* -- ARROW 6 -- */
.arrow-6 {
/* more triangle */
height: 10px; width: 10px;
border: 1px solid rgba(255, 255, 255, 0.6);
border-width: 3px 3px 0 0;
transform: rotate(45deg);
}
.arrow-6:before, .arrow-6:after {
content: '';
position: absolute;
display: block;
height: 10px; width: 10px;
border-width: 3px 3px 0 0;
}
.arrow-6:before {
border: 1px solid rgba(255, 255, 255, 0.3);
border-width: 3px 3px 0 0;
/* top - distance minus border */
top: 7px; left: -10px;
}
.arrow-6:after {
border: 1px solid rgba(255, 255, 255, 1);
border-width: 3px 3px 0 0;
/* top - distance plus border */
top: -13px; left: 10px;
}
This Pen doesn't use any external CSS resources.