CSS Caret Design

by Vikash Kumar Gupta

HTML

Arrow Direction: 
<button onclick="window.arrowDirection(1)">Left Top</button>
<button onclick="window.arrowDirection(4)">Left Bottom</button>
<button onclick="window.arrowDirection(2)">Right Top</button>
<button onclick="window.arrowDirection(3)">Right Bottom </button>

<div class="arrow_box">
  
  Your text here
</div>

CSS

/* Refer: http://www.cssarrowplease.com/ */
/* Container */
.arrow_box {
	position: relative;
	background: #fff;
	border: 1px solid #575757;
  padding: 40px;
  width: 280px;
  height: 100px;
  text-align: center;
  font-weight: bold;
  font-size: 1.4em;
  color: #575757;
  left: 10px;
}

/* Container Before and After Content and their basic styling */
.arrow_box:after, .arrow_box:before {
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

/* When arrow is positioned at bottom */
.arrow_box.bottom:after, .arrow_box.bottom:before {
	bottom: -1px;
}
/* When arrow is positioned at top */
.arrow_box.top:after, .arrow_box.top:before {
	top: 10px;
}

/* When arrow is positioned at left */
.arrow_box.left:after, .arrow_box.left:before {
	right: 100%;
}

/* When arrow is positioned at right */
.arrow_box.right:after, .arrow_box.right:before {
	left: 100%;
}

/* LEFT-TOP */
/* When arrow is positioned at left-top, 
:after is for white background*/
.arrow_box.left.top:after
{
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #fff;
	border-width: 10px;
	margin-top: -10px;
}

/* When arrow is positioned at left-top, 
:before is for hidden border-color*/
.arrow_box.left.top:before
{
	border-color: rgba(87, 87, 87, 0);
	border-right-color: #575757;
	border-width: 11px;
	margin-top: -11px;
}

/* LEFT-BOTTOM */
/* When arrow is positioned at left-bottom, 
:after is for white background*/
.arrow_box.left.bottom:after
{
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #fff;
	border-width: 10px;
	margin-bottom: 1px;
}

/* When arrow is positioned at left-bottom, 
:before is for hidden border-color*/
.arrow_box.left.bottom:before
{
	border-color: rgba(87, 87, 87, 0);
	border-right-color: #575757;
	border-width: 11px;
	margin-bottom: 0px;
}

/* RIGHT-TOP */
/* When arrow is positioned at right-top, 
:after is for white background*/
.arrow_box.right.top:after
{
	border-color: rgba(255, 255, 255,...

JavaScript

window.arrowDirection = function(direction){
	
  let arrowBox = document.querySelector('.arrow_box');
  arrowBox.classList.remove('left','right','top','bottom');
  
  switch(direction){
  	case 1: arrowBox.classList.add('left','top');
    				break;
    case 2: arrowBox.classList.add('right','top');
    				break;
    case 3: arrowBox.classList.add('right','bottom');
      			break;	
    case 4: arrowBox.classList.add('left','bottom');
    				break;
  }
  
}

window.arrowDirection(1);