<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js