This post contains a total of 7+ CSS Arrow Box Examples with Source Code. All these Arrow Boxes are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Arrow Box Examples
1. Arrow box
Made by Daniel Sitek. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
font-family: "Open Sans", sans-serif;
line-height: 1.5;
font-size: 1.2em;
background: #212121;
}
.arrowbox {
display: block;
width: 500px;
margin: 200px auto 0 auto;
padding: 10px 20px;
background: #fff;
box-sizing: border-box;
position: relative;
}
.arrowbox:before, .arrowbox:after {
position: absolute;
content: "";
}
.arrow-inside:before {
top: -30px;
left: 0;
width: 50%;
height: 1px;
border: 30px solid transparent;
border-width: 0 30px 30px 0;
border-bottom-color: #fff;
box-sizing: border-box;
}
.arrow-inside:after {
top: -30px;
right: 0;
width: 50%;
height: 1px;
border: 30px solid transparent;
border-width: 0 0 30px 30px;
border-bottom-color: #fff;
box-sizing: border-box;
}
.arrow-bottom:after {
bottom: -30px;
left: 50%;
width: 1px;
height: 1px;
margin-left: -40px;
border: 30px solid transparent;
border-width: 30px 40px 0px 40px;
border-top-color: #fff;
box-sizing: border-box;
}
.arrow-bordered {
border: 5px solid #23bdc2 ;
}
.arrow-bordered:before {
bottom: -30px;
left: 50%;
width: 1px;
height: 1px;
margin-left: -40px;
border: 30px solid transparent;
border-width: 30px 40px 0px 40px;
border-top-color: #23bdc2 ;
box-sizing: border-box;
}
.arrow-bordered:after {
bottom: -30px;
left: 50%;
width: 1px;
height: 1px;
margin-left: -40px;
margin-bottom: 7px;
border: 30px solid transparent;
border-width: 30px 40px 0px 40px;
border-top-color: #fff;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="arrowbox arrow-bottom" id="box">
<p>Text Here</p>
</div>
</body>
</html>2. Css-arrow mixin for sass/scss
Made by Erin Keeffe. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
.wrap {
margin: 10% auto;
width: 480px;
height: 100%;
}
.arrow {
position: relative;
float: left;
float: left;
width: 100px;
height: 30px;
padding: 10px 5px 0;
margin: 20px;
background: black;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-family: menlo, monaco, "andale mono", "courier new", fixed;
font-size: 16px;
color: white;
text-align: center;
}
.arrow.default:after, .arrow.default:before {
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border: solid rgba(255, 255, 255, 0);
}
.arrow.default:after {
border-color: rgba(255, 255, 255, 0);
border-width: 9px;
bottom: -18px;
border-top-color: black;
left: 50%;
margin-left: -9px;
}
.arrow.default:before {
border-color: rgba(255, 255, 255, 0);
border-width: 10px;
bottom: -20px;
border-top-color: none;
left: 50%;
margin-left: -10px;
}
.arrow.small {
background: #afb4d7;
}
.arrow.small:after, .arrow.small:before {
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border: solid rgba(255, 255, 255, 0);
}
.arrow.small:after {
border-color: rgba(255, 255, 255, 0);
border-width: 5px;
left: -10px;
border-right-color: #afb4d7;
top: 50%;
margin-top: -5px;
}
.arrow.small:before {
border-color: rgba(255, 255, 255, 0);
border-width: 6px;
left: -12px;
border-right-color: none;
top: 50%;
margin-top: -6px;
}
.arrow.med {
background: #959cca;
}
.arrow.med:after, .arrow.med:before {
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border: solid rgba(255, 255, 255, 0);
}
.arrow.med:after {
border-color: rgba(255, 255, 255, 0);
border-width: 7px;
top: -14px;
border-bottom-color: #959cca;
left: 0;
margin-left: 11px;
}
.arrow.med:before {
border-color: rgba(255, 255, 255, 0);
border-width: 8px;
top: -16px;
border-bottom-color: none;
left: 0;
margin-left: 10px;
}
.arrow.large {
background: #7b83bd;
}
.arrow.large:after, .arrow.large:before {
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border: solid rgba(255, 255, 255, 0);
}
.arrow.large:after {
border-color: rgba(255, 255, 255, 0);
border-width: 13px;
bottom: -26px;
border-top-color: #7b83bd;
right: 0;
margin-right: 26px;
}
.arrow.large:before {
border-color: rgba(255, 255, 255, 0);
border-width: 14px;
bottom: -28px;
border-top-color: none;
right: 0;
margin-right: 25px;
}
.arrow.border {
color: #6d9e28;
width: 98px;
height: 28px;
border: 1px solid #97d045;
background: #d6edb6;
}
.arrow.border:after, .arrow.border:before {
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border: solid rgba(255, 255, 255, 0);
}
.arrow.border:after {
border-color: rgba(255, 255, 255, 0);
border-width: 17px;
top: -34px;
border-bottom-color: #d6edb6;
left: 50%;
margin-left: -17px;
}
.arrow.border:before {
border-color: rgba(255, 255, 255, 0);
border-width: 18px;
top: -36px;
border-bottom-color: #97d045;
left: 50%;
margin-left: -18px;
}
.arrow.flag {
color: #6d9e28;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px;
border-radius: 3px 0 0 3px;
background: #cce8a4;
-moz-box-shadow: 0 1px 0 #afb4d7;
-webkit-box-shadow: 0 1px 0 #afb4d7;
box-shadow: 0 1px 0 #afb4d7;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.arrow.flag:after, .arrow.flag:before {
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border: solid rgba(255, 255, 255, 0);
}
.arrow.flag:after {
border-color: rgba(255, 255, 255, 0);
border-width: 19px;
right: -38px;
border-left-color: #cce8a4;
top: 50%;
margin-top: -19px;
}
.arrow.flag:before {
border-color: rgba(255, 255, 255, 0);
border-width: 19px;
right: -38px;
border-left-color: #959cca;
top: 50%;
margin-top: -18px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="arrow default">default</div>
<div class="arrow small">small</div>
<div class="arrow med">med</div>
<div class="arrow large">large</div>
<div class="arrow border">border</div>
<div class="arrow flag">flag</div>
</div>
</body>
</html>3. Arrow Box with CSS (12 positions)
Made by Yiwei Ma. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=OpenSans");
.box {
width: 150px;
height: 100px;
background-color: #3498db;
position: relative;
border-radius: 4px;
}
.box:after {
content: "";
display: block;
border-width: 10px 10px 0;
border-style: solid;
border-color: #3498db transparent transparent;
margin-left: -10px;
position: absolute;
bottom: -10px;
left: 50%;
}
.box.arrow-bottom-left:after,
.box.arrow-bottom-right:after,
.box.arrow-top-left:after,
.box.arrow-top-right:after,
.box.arrow-left-top:after,
.box.arrow-left-bottom:after,
.box.arrow-right-top:after,
.box.arrow-right-bottom:after {
border-width: 5px;
margin: 0;
}
.box.arrow-bottom-left:after,
.box.arrow-bottom-right:after {
border-left-color: #3498db;
}
.box.arrow-bottom-left:after {
left: 0;
right: auto;
}
.box.arrow-bottom-right:after {
border-left-color: transparent;
border-right-color: #3498db;
left: auto;
right: 0;
}
.box.arrow-top-center:after,
.box.arrow-top-left:after,
.box.arrow-top-right:after {
border-top-color: transparent;
border-bottom-color: #3498db;
top: -10px;
bottom: auto;
}
.box.arrow-top-center:after {
border-top-width: 0;
border-bottom-width: 10px;
}
.box.arrow-top-left:after,
.box.arrow-top-right:after {
border-width: 5px;
border-left-color: #3498db;
}
.box.arrow-top-left:after {
left: 0;
right: auto;
}
.box.arrow-top-right:after {
border-left-color: transparent;
border-right-color: #3498db;
left: auto;
right: 0;
}
.box.arrow-left-center:after,
.box.arrow-left-top:after,
.box.arrow-left-bottom:after {
border-width: 10px;
border-left-color: transparent;
border-left-width: 0;
border-top-color: transparent;
border-right-color: #3498db;
margin: -10px 0 0;
left: -10px;
right: auto;
top: 50%;
bottom: auto;
}
.box.arrow-left-top:after,
.box.arrow-left-bottom:after {
border-width: 5px;
margin: 0;
}
.box.arrow-left-top:after {
border-top-color: #3498db;
top: 0;
}
.box.arrow-left-bottom:after {
border-bottom-color: #3498db;
top: auto;
bottom: 0;
}
.box.arrow-right-center:after,
.box.arrow-right-top:after,
.box.arrow-right-bottom:after {
border-width: 10px;
border-right-width: 0;
border-top-color: transparent;
border-left-color: #3498db;
margin: -10px 0 0;
left: auto;
right: -10px;
top: 50%;
bottom: auto;
}
.box.arrow-right-top:after,
.box.arrow-right-bottom:after {
border-width: 5px;
margin: 0;
}
.box.arrow-right-top:after {
border-top-color: #3498db;
top: 0;
}
.box.arrow-right-bottom:after {
border-bottom-color: #3498db;
top: auto;
bottom: 0;
}
.box.arrow-bottom-left,
.box.arrow-left-bottom {
border-bottom-left-radius: 0;
}
.box.arrow-bottom-right,
.box.arrow-right-bottom {
border-bottom-right-radius: 0;
}
.box.arrow-top-left,
.box.arrow-left-top {
border-top-left-radius: 0;
}
.box.arrow-top-right,
.box.arrow-right-top {
border-top-right-radius: 0;
}
html,
body {
background: #f5f5f5;
font-size: 100%;
font-family: 'Open Sans', sans-serif;
width: 100%;
}
h3 {
position: relative;
text-align: center;
text-transform: uppercase;
width: 240px;
display: block;
margin: 20px auto;
}
h3:before,
h3:after {
content: "";
display: block;
height: 1px;
width: 50px;
background-color: #ddd;
position: absolute;
top: 50%;
left: -60px;
}
h3:after {
right: -60px;
left: auto;
}
.box {
margin: 20px 10px;
float: left;
}
.box.blue {
background-color: #3498db;
}
.box.blue.arrow-bottom-center:after,
.box.blue.arrow-bottom-left:after,
.box.blue.arrow-bottom-right:after {
border-top-color: #3498db;
}
.box.blue.arrow-bottom-left:after {
border-left-color: #3498db;
}
.box.blue.arrow-bottom-right:after {
border-right-color: #3498db;
}
.box.blue.arrow-top-center:after,
.box.blue.arrow-top-left:after,
.box.blue.arrow-top-right:after {
border-bottom-color: #3498db;
}
.box.blue.arrow-top-left:after {
border-left-color: #3498db;
}
.box.blue.arrow-top-right:after {
border-right-color: #3498db;
}
.box.blue.arrow-left-center:after,
.box.blue.arrow-left-top:after,
.box.blue.arrow-left-bottom:after {
border-right-color: #3498db;
}
.box.blue.arrow-left-top:after {
border-top-color: #3498db;
}
.box.blue.arrow-left-bottom:after {
border-bottom-color: #3498db;
}
.box.blue.arrow-right-center:after,
.box.blue.arrow-right-top:after,
.box.blue.arrow-right-bottom:after {
border-left-color: #3498db;
}
.box.blue.arrow-right-top:after {
border-top-color: #3498db;
}
.box.blue.arrow-right-bottom:after {
border-bottom-color: #3498db;
}
.box.green {
background-color: #1abc9c;
}
.box.green.arrow-bottom-center:after,
.box.green.arrow-bottom-left:after,
.box.green.arrow-bottom-right:after {
border-top-color: #1abc9c;
}
.box.green.arrow-bottom-left:after {
border-left-color: #1abc9c;
}
.box.green.arrow-bottom-right:after {
border-right-color: #1abc9c;
}
.box.green.arrow-top-center:after,
.box.green.arrow-top-left:after,
.box.green.arrow-top-right:after {
border-bottom-color: #1abc9c;
}
.box.green.arrow-top-left:after {
border-left-color: #1abc9c;
}
.box.green.arrow-top-right:after {
border-right-color: #1abc9c;
}
.box.green.arrow-left-center:after,
.box.green.arrow-left-top:after,
.box.green.arrow-left-bottom:after {
border-right-color: #1abc9c;
}
.box.green.arrow-left-top:after {
border-top-color: #1abc9c;
}
.box.green.arrow-left-bottom:after {
border-bottom-color: #1abc9c;
}
.box.green.arrow-right-center:after,
.box.green.arrow-right-top:after,
.box.green.arrow-right-bottom:after {
border-left-color: #1abc9c;
}
.box.green.arrow-right-top:after {
border-top-color: #1abc9c;
}
.box.green.arrow-right-bottom:after {
border-bottom-color: #1abc9c;
}
.box.orange {
background-color: #e67e22;
}
.box.orange.arrow-bottom-center:after,
.box.orange.arrow-bottom-left:after,
.box.orange.arrow-bottom-right:after {
border-top-color: #e67e22;
}
.box.orange.arrow-bottom-left:after {
border-left-color: #e67e22;
}
.box.orange.arrow-bottom-right:after {
border-right-color: #e67e22;
}
.box.orange.arrow-top-center:after,
.box.orange.arrow-top-left:after,
.box.orange.arrow-top-right:after {
border-bottom-color: #e67e22;
}
.box.orange.arrow-top-left:after {
border-left-color: #e67e22;
}
.box.orange.arrow-top-right:after {
border-right-color: #e67e22;
}
.box.orange.arrow-left-center:after,
.box.orange.arrow-left-top:after,
.box.orange.arrow-left-bottom:after {
border-right-color: #e67e22;
}
.box.orange.arrow-left-top:after {
border-top-color: #e67e22;
}
.box.orange.arrow-left-bottom:after {
border-bottom-color: #e67e22;
}
.box.orange.arrow-right-center:after,
.box.orange.arrow-right-top:after,
.box.orange.arrow-right-bottom:after {
border-left-color: #e67e22;
}
.box.orange.arrow-right-top:after {
border-top-color: #e67e22;
}
.box.orange.arrow-right-bottom:after {
border-bottom-color: #e67e22;
}
.box.red {
background-color: #e74c3c;
}
.box.red.arrow-bottom-center:after,
.box.red.arrow-bottom-left:after,
.box.red.arrow-bottom-right:after {
border-top-color: #e74c3c;
}
.box.red.arrow-bottom-left:after {
border-left-color: #e74c3c;
}
.box.red.arrow-bottom-right:after {
border-right-color: #e74c3c;
}
.box.red.arrow-top-center:after,
.box.red.arrow-top-left:after,
.box.red.arrow-top-right:after {
border-bottom-color: #e74c3c;
}
.box.red.arrow-top-left:after {
border-left-color: #e74c3c;
}
.box.red.arrow-top-right:after {
border-right-color: #e74c3c;
}
.box.red.arrow-left-center:after,
.box.red.arrow-left-top:after,
.box.red.arrow-left-bottom:after {
border-right-color: #e74c3c;
}
.box.red.arrow-left-top:after {
border-top-color: #e74c3c;
}
.box.red.arrow-left-bottom:after {
border-bottom-color: #e74c3c;
}
.box.red.arrow-right-center:after,
.box.red.arrow-right-top:after,
.box.red.arrow-right-bottom:after {
border-left-color: #e74c3c;
}
.box.red.arrow-right-top:after {
border-top-color: #e74c3c;
}
.box.red.arrow-right-bottom:after {
border-bottom-color: #e74c3c;
}
</style>
</head>
<body>
<div id="container">
<h3>Arrow Box with CSS </br><span style="font-size: 80%; color:#999">(12 positions)</span></h3>
<!-- the boxes -->
<div id="boxContainer"></div>
</div>
<script>
var CLASS_NAME_LOOKUP = {
"bottom center": "",
"bottom left": "arrow-bottom-left",
"bottom right": "arrow-bottom-right",
"top center": "arrow-top-center",
"top left": "arrow-top-left",
"top right": "arrow-top-right",
"left center": "arrow-left-center",
"left top": "arrow-left-top",
"left bottom": "arrow-left-bottom",
"right center": "arrow-right-center",
"right top": "arrow-right-top",
"right bottom": "arrow-right-bottom" };
var BOX_BG_CLASS = ["blue", "green", "orange", "red"];
(function () {
var targetNode = document.getElementById("boxContainer");
var boxesHTML = "";
var classNames = "";
var i = 0;
for (var pos in CLASS_NAME_LOOKUP) {
classNames = "box " + BOX_BG_CLASS[Math.floor(i / 3)];
classNames += " " + CLASS_NAME_LOOKUP[pos];
//var div = document.createElement("div");
var div = "<div class='" + classNames + "'></div>";
boxesHTML += div;
++i;
}
targetNode.innerHTML = boxesHTML;
})();
</script>
</body>
</html>4. Box with arrow
Made by Ismael Messa. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>
<style>
body{
background: linear-gradient(to right, #538976, #192e29);
}
.box {
position: relative;
width: 350px;
min-width: 300px;
max-width: 350px;
height: 400px;
min-height: 400px;
font-size: 11px;
}
.box-img{
position: absolute;
z-index: 999;
overflow: hidden;
height: 60%;
left: 5.2%;
right:1%;
top: 0%;
padding: 5px;
}
.item-name {
position: absolute;
width: 90%;
top: 63%;
left: 6.3%;
white-space: nowrap;
z-index: 999;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
padding: 3px;
font-size: 1.7em;
font-weight: 600;
}
.item-budget {
position: absolute;
z-index: 999;
width: 80%;
right: 2%;
top: 75%;
padding-right: 5px;
font-size: 1.7em;
font-weight: 500;
}
.item-budget span:nth-child(1){
float:left;
}
.item-budget span:nth-child(2){
float: right;
}
.line{
position: absolute;
width: 80%;
top: 81%;
right: 3%;
z-index: 999;
border: .5px solid gray;
opacity: 0.5;
}
.box-info{
position: absolute;
display: block;
z-index: 999;
font-size:1.1em;
opacity: 0.8;
width: 80%;
right: 2%;
top: 85%;
}
.box-info span:nth-child(1){
position: absolute;
top: 5%;
left: -17%;
font-size: 30px;
color: red;
}
.box-info span:nth-child(2){
float:left;
}
.box-info span:nth-child(3){
float:right;
}
.box.arrow-top {
margin: auto;
margin-top: 40px;
}
.box.arrow-top:after {
content: "";
position: absolute;
display: block;
z-index:0;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: white;
box-sizing: border-box;
clip-path: polygon( 6% 1%, 99% 1%, 99% 92%, 13% 92%, 1% 99%, 6% 71%);
}
.box.arrow-top:before {
content: "";
position: absolute;
display: block;
z-index: 0;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: gray;
opacity: 0.6;
box-sizing: border-box;
clip-path: polygon( 5% 0%, 100% 0%, 100% 93%, 13% 93%, 0% 100.5%, 4.6% 73%);
}
</style>
</head>
<body>
<div class="box arrow-top">
<div class="box-img">
<img src="https://media.gettyimages.com/photos/ford-fairlane-500-convertible-picture-id499598783?s=612x612" alt="test" width='100%' height='100%' />
</div>
<div class="item-name"> FORD FAIRLANE </div>
<div class="item-budget">
<span>BUDGET</span>
<span>$$$$</span>
</div>
<div class='line'></div>
<div class="box-info">
<span class="icon-heart" >
<i class="fa fa-heart" aria-hidden="true"></i>
</span>
<span>RARE & CUSTOM VEHICULES</span>
<span>DALLAS. TX</span>
</div>
</div>
</body>
</html>5. Single SASS mixin for CSS Arrows
Made by Jon Daiello. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400" rel="stylesheet">
<style>
/* This mixin is for generating CSS arrows on a box */
body {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 5vmin;
margin: 0;
font-family: "Source Sans Pro", sans-serif;
background: #f9f6ef;
}
.c-header {
width: 100%;
text-align: center;
font-size: calc(100% + 1vmin);
}
.c-header h1 {
font-weight: 700;
color: #333;
}
.c-box {
background: #587b7f;
font-size: 150%;
text-align: center;
color: #fff;
flex-basis: 30%;
padding: 5vmin;
margin: 5vmin;
}
.c-box--arrow-top {
position: relative;
z-index: 10;
}
.c-box--arrow-top::after {
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
z-index: 10;
border: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin-left: -10px;
left: 50%;
border-bottom: 10px solid #587b7f;
top: -10px;
}
.c-box--arrow-right {
position: relative;
z-index: 10;
}
.c-box--arrow-right::after {
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
z-index: 10;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
margin-top: -10px;
top: 50%;
border-left: 10px solid #587b7f;
left: auto;
right: -10px;
}
.c-box--arrow-bottom {
position: relative;
z-index: 10;
}
.c-box--arrow-bottom::after {
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
z-index: 10;
border: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
margin-left: -10px;
left: 50%;
border-top: 10px solid #587b7f;
bottom: -10px;
}
.c-box--arrow-left {
position: relative;
z-index: 10;
}
.c-box--arrow-left::after {
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
z-index: 10;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
margin-top: -10px;
top: 50%;
border-right: 10px solid #587b7f;
left: -10px;
}
.c-footer {
width: 100%;
text-align: center;
}
.c-btn {
background: #d87517;
display: inline-block;
color: #fff;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0.75em 1.5em 0.85em;
font-size: 120%;
line-height: 140%;
border-radius: 2px;
border: 3px solid #d87517;
box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
transition: 0.2s all ease-out;
}
.c-btn:hover {
color: #d87517;
background: #fff;
box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.2);
border: 3px solid #d87517;
}
</style>
</head>
<body>
<header class="c-header"><h1>A Single SASS @mixin for Creating CSS Arrows</h1></header>
<div class="c-box c-box--arrow-top">
This box has a top arrow.
</div>
<div class="c-box c-box--arrow-right">
This box has a right arrow.
</div>
<div class="c-box c-box--arrow-bottom">
This box has a bottom arrow.
</div>
<div class="c-box c-box--arrow-left">
This box has a left arrow.
</div>
<footer class="c-footer">
<a class="c-btn" href="https://gist.github.com/jondaiello/a0cc2dbf8994ff757e4ac13bb8168969" target="_blank">Grab the Gist</a>
</footer>
</body>
</html>6. Box with triangle arrow
Made by lideo. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
.box {
width: 150px;
height: 75px;
background-color: black;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.box.arrow-top {
margin-top: 40px;
}
.box.arrow-top:after {
content: " ";
position: absolute;
right: 30px;
top: -15px;
border-top: none;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid black;
}
.box.arrow-right:after {
content: " ";
position: absolute;
right: -15px;
top: 15px;
border-top: 15px solid transparent;
border-right: none;
border-left: 15px solid black;
border-bottom: 15px solid transparent;
}
.box.arrow-bottom:after {
content: " ";
position: absolute;
right: 30px;
bottom: -15px;
border-top: 15px solid black;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: none;
}
.box.arrow-left:after {
content: " ";
position: absolute;
left: -15px;
top: 15px;
border-top: 15px solid transparent;
border-right: 15px solid black;
border-left: none;
border-bottom: 15px solid transparent;
}
</style>
</head>
<body>
<div class="box arrow-top">
This is a box with some content and an arrow at the top.
</div>
<div class="box arrow-right">
This is a box with some content and an arrow on the right.
</div>
<div class="box arrow-bottom">
This is a box with some content and an arrow at the bottom.
</div>
<div class="box arrow-left">
This is a box with some content and an arrow on the left.
</div>
</body>
</html>7. box with arrow
Made by David. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
margin: 0;
padding: 0;
background-color: #72BAEC;
overflow: hidden;
}
.app {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.app .box {
position: relative;
width: 200px;
height: 200px;
border: 10px solid #FFF;
border-radius: 20px 0 20px 20px;
box-shadow: -10px 10px 15px rgba(0, 0, 0, 0.2);
}
.app .box .arrow {
position: absolute;
left: 50%;
width: 10px;
height: 250px;
background: #FFF;
transform: rotate(45deg) translate(-210%, -35px);
transform-origin: center center;
}
.app .box .arrow::after, .app .box .arrow::before {
position: absolute;
content: "";
width: 15px;
height: 30px;
background: #000;
transform-origin: top center;
background: #72BAEC;
}
.app .box .arrow::after {
top: 30px;
right: 30px;
transform: rotate(45deg);
}
.app .box .arrow::before {
top: 30px;
left: 30px;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="app">
<div class="box">
<div class="arrow"></div>
</div>
</div>
</body>
</html>8. Fancy Block Quotes
Made by Neil. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
*:not(.arrow-down){
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
article{
display: block;
width: 220px;
float: left;
margin: 20px;
}
article:hover{
background: rgba(227,114,6,0.15);
}
article .header {
height: 200px;
}
article:nth-child(4n+1) .header {
background-position: left bottom;
}
article:nth-child(4n+2) .header {
background-position: -600px bottom;//units of 300px
}
article:nth-child(4n+2) h2 {
background: #e37206;
background: rgba(227,114,6,0.85);
}
article:nth-child(4n+1) .header:after{
border-top-color: #118fca;
border-top-color: rgba(17,143,202,0.85);
}
article:nth-child(4n+2) .header:after{
border-top-color: #e37206;
border-top-color: rgba(227,114,6,0.85);
}
article:nth-child(4n+1) h2 {
background: #118fca;
background: rgba(17,143,202,0.85);
}
article .header:after{
content: " ";
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid transparent;
display: block;
position: absolute;
margin-bottom: -20px;
margin-left: 10px;
}
.header h2{
margin: 0;
width: 100%;
height: 185px;
color: white;
padding: 20px;
}
article .desc p{
color: #333;
}
article .desc{
padding: 0 15px 8px 12px;
}
</style>
</head>
<body>
<article>
<div class='header'><h2>Block Quote Header</h2></div>
<div class='desc'><p>Lorem ipsum dolor sit amet.</p></div>
</article>
<article>
<div class='header'><h2>Block Quote Header</h2></div>
<div class='desc'><p>Lorem ipsum dolor sit amet.</p></div>
</article>
</body>
</html>