Triangle Mask LESS

Triangle Mask LESS Mixin

.hero-mask(@trianlgle-height: 40px) {
	height: (@trianlgle-height / 2);
	position: absolute;
		bottom: 0;
		left: 0;
	width: 100%;
	z-index: 1000;
	
	&:before,
	&:after {
		border-bottom: (@trianlgle-height / 2) solid #fafafa;
		content: ' ';
		display: block;
		position: absolute;
			top: 0;
			height: 0;
		width: 50%;
	}

	&:before {
		border-left: 0;
		border-right: @trianlgle-height solid transparent;
		left: 0;
	}

	&:after {
		border-right: 0;
		border-left: @trianlgle-height solid transparent;
		right: 0;
	}

}// .hero-mask

Triangle Mask LESS Mixin - HTML Setup

<div class="hero">
	<div class="content">Content Goes Here</div>
	<div class="hero-mask"></div>
</div>

Triangle Mask LESS Mixin - LESS Setup

.hero {
	.background-cover('../img/img.jpg', center); // https://gist.github.com/yankeyhotel/a96e5ef7bb83af8bb670
	position: relative;
	width: 100%;
	.hero-mask {
		.hero-mask();
	}
}