Gradient Arrows

What is it?

Why it's important?

What are the benefits of it?

How we do it!

Examples:

HTML

<div class="gradient_arrow || gradient_arrow_top">What is it?</div>
<div class="gradient_arrow || gradient_arrow_right">Why it's important?</div>
<div class="gradient_arrow || gradient_arrow_bottom">What are the benefits of it?</div>
<div class="gradient_arrow || gradient_arrow_left">How we do it!</div>

CSS

.gradient_arrow{font-size:1.8rem;line-height:1.2;color:#fff;background-color:#31344b;width:100%;max-width:24rem;margin:0 auto;padding:1.3rem 1.5rem 1rem;position:relative}
.gradient_arrow::after{content:"";position:absolute;background-repeat:no-repeat}
.gradient_arrow.gradient_arrow_top::after{bottom:100%;left:0;width:100%;height:1.5rem;background-image:-webkit-linear-gradient(top left,transparent 50%,#31344b -webkit-calc(50% + 0.2rem)),-webkit-linear-gradient(top right,transparent 50%,#31344b -webkit-calc(50% + 0.2rem));background-image:-moz-linear-gradient(top left,transparent 50%,#31344b -moz-calc(50% + 0.2rem)),-moz-linear-gradient(top right,transparent 50%,#31344b -moz-calc(50% + 0.2rem));background-image:-webkit-gradient(linear,left top,right bottom,color-stop(50%,transparent),to(#31344b)),-webkit-gradient(linear,right top,left bottom,color-stop(50%,transparent),to(#31344b));background-image:-o-linear-gradient(top left,transparent 50%,#31344b calc(50% + 0.2rem)),-o-linear-gradient(top right,transparent 50%,#31344b calc(50% + 0.2rem));background-image:linear-gradient(to bottom right,transparent 50%,#31344b calc(50% + 0.2rem)),linear-gradient(to bottom left,transparent 50%,#31344b calc(50% + 0.2rem));background-position:bottom left,bottom right;-webkit-background-size:50.1% 100%;-moz-background-size:50.1% 100%;-o-background-size:50.1% 100%;background-size:50.1% 100%}
.gradient_arrow.gradient_arrow_right::after{top:0;left:100%;width:1.5rem;height:100%;background-image:-webkit-linear-gradient(right top,transparent 50%,#31344b -webkit-calc(50% + 0.2rem)),-webkit-linear-gradient(right bottom,transparent 50%,#31344b -webkit-calc(50% + 0.2rem));background-image:-moz-linear-gradient(right top,transparent 50%,#31344b -moz-calc(50% + 0.2rem)),-moz-linear-gradient(right bottom,transparent 50%,#31344b -moz-calc(50% + 0.2rem));background-image:-webkit-gradient(linear,right top,left bottom,color-stop(50%,transparent),to(#31344b)),-webkit-gradient(linear,right bottom,left top,color-stop(50%,transparent),to(#31344b));background-image:-o-linear-gradient(right top,transparent 50%,#31344b calc(50% + 0.2rem)),-o-linear-gradient(right bottom,transparent 50%,#31344b calc(50% + 0.2rem));background-image:linear-gradient(to left bottom,transparent 50%,#31344b calc(50% + 0.2rem)),linear-gradient(to left top,transparent 50%,#31344b calc(50% + 0.2rem));background-position:left top,left bottom;-webkit-background-size:100% 50.1%;-moz-background-size:100% 50.1%;-o-background-size:100% 50.1%;background-size:100% 50.1%}
.gradient_arrow.gradient_arrow_bottom::after{top:100%;left:0;width:100%;height:1.5rem;background-image:-webkit-linear-gradient(bottom left,transparent 50%,#31344b -webkit-calc(50% + 0.2rem)),-webkit-linear-gradient(bottom right,transparent 50%,#31344b -webkit-calc(50% + 0.2rem));background-image:-moz-linear-gradient(bottom left,transparent 50%,#31344b -moz-calc(50% + 0.2rem)),-moz-linear-gradient(bottom right,transparent 50%,#31344b -moz-calc(50% + 0.2rem));background-image:-webkit-gradient(linear,left bottom,right top,color-stop(50%,transparent),to(#31344b)),-webkit-gradient(linear,right bottom,left top,color-stop(50%,transparent),to(#31344b));background-image:-o-linear-gradient(bottom left,transparent 50%,#31344b calc(50% + 0.2rem)),-o-linear-gradient(bottom right,transparent 50%,#31344b calc(50% + 0.2rem));background-image:linear-gradient(to top right,transparent 50%,#31344b calc(50% + 0.2rem)),linear-gradient(to top left,transparent 50%,#31344b calc(50% + 0.2rem));background-position:top left,top right;-webkit-background-size:50.1% 100%;-moz-background-size:50.1% 100%;-o-background-size:50.1% 100%;background-size:50.1% 100%}
.gradient_arrow.gradient_arrow_left::after{top:0;right:100%;width:1.5rem;height:100%;background-image:-webkit-linear-gradient(left top,transparent 50%,#31344b -webkit-calc(50% + 0.2rem)),-webkit-linear-gradient(left bottom,transparent 50%,#31344b -webkit-calc(50% + 0.2rem));background-image:-moz-linear-gradient(left top,transparent 50%,#31344b -moz-calc(50% + 0.2rem)),-moz-linear-gradient(left bottom,transparent 50%,#31344b -moz-calc(50% + 0.2rem));background-image:-webkit-gradient(linear,left top,right bottom,color-stop(50%,transparent),to(#31344b)),-webkit-gradient(linear,left bottom,right top,color-stop(50%,transparent),to(#31344b));background-image:-o-linear-gradient(left top,transparent 50%,#31344b calc(50% + 0.2rem)),-o-linear-gradient(left bottom,transparent 50%,#31344b calc(50% + 0.2rem));background-image:linear-gradient(to right bottom,transparent 50%,#31344b calc(50% + 0.2rem)),linear-gradient(to right top,transparent 50%,#31344b calc(50% + 0.2rem));background-position:right top,right bottom;-webkit-background-size:100% 50.1%;-moz-background-size:100% 50.1%;-o-background-size:100% 50.1%;background-size:100% 50.1%}

SCSS

/* Vars */
$neu_h_color:      #31344b;
$white:            #ffffff;

.gradient_arrow {
	font-size: 1.8rem;
	line-height: 1.2;
	color: $white;
	background-color: $neu_h_color;
	width: 100%;
	max-width: 24rem;
	margin: 0 auto;
	padding: 1.3rem 1.5rem 1rem;
	position: relative;

	&::after{
		content: "";
		position: absolute;
		background-repeat: no-repeat;
	}
	
	&.gradient_arrow_top {
		&::after {
			bottom: 100%;
			left: 0;
			width: 100%;
			height: 1.5rem;
			background-image: linear-gradient(to bottom right, transparent 50%, $neu_h_color calc(50% + 0.2rem)),linear-gradient(to bottom left, transparent 50%, $neu_h_color calc(50% + 0.2rem));
			background-position: bottom left, bottom right;
			background-size: 50.1% 100%;
		}
	}
	
	&.gradient_arrow_right {
		&::after {
			top: 0;
			left: 100%;
			width: 1.5rem;
			height: 100%;
			background-image: linear-gradient(to left bottom, transparent 50%, $neu_h_color calc(50% + 0.2rem)),linear-gradient(to left top, transparent 50%, $neu_h_color calc(50% + 0.2rem));
			background-position: left top,left bottom;
			background-size: 100% 50.1%;
		}
	}
	
	&.gradient_arrow_bottom {
		&::after {
			top: 100%;
			left: 0;
			width: 100%;
			height: 1.5rem;
			background-image: linear-gradient(to top right, transparent 50%, $neu_h_color calc(50% + 0.2rem)),linear-gradient(to top left, transparent 50%, $neu_h_color calc(50% + 0.2rem));
			background-position: top left, top right;
			background-size: 50.1% 100%;
		}
	}
	
	&.gradient_arrow_left {
		&::after {
			top: 0;
			right: 100%;
			width: 1.5rem;
			height: 100%;
			background-image: linear-gradient(to right bottom, transparent 50%, $neu_h_color calc(50% + 0.2rem)),linear-gradient(to right top, transparent 50%, $neu_h_color calc(50% + 0.2rem));
			background-position: right top,right bottom;
			background-size: 100% 50.1%;
		}
	}
}