JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<div class="diagonal_lines_pattern">
	<p>Diagonal Lines Pattern</p>
</div>

CSS

.diagonal_lines_pattern, body{
	background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #ccc), color-stop(0.25, #ccc), color-stop(0.25, #bbb), color-stop(0.5, #bbb), color-stop(0.5, #ccc), color-stop(0.75, #ccc), color-stop(0.75, #bbb));
	background-image: -webkit-linear-gradient(right bottom, transparent 0%, transparent 25%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.25) 50%, transparent 50%, transparent 75%, rgba(0,0,0,0.25) 75%);
	background-image: -moz-linear-gradient(right bottom, transparent 0%, transparent 25%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.25) 50%, transparent 50%, transparent 75%, rgba(0,0,0,0.25) 75%);
	background-image: -ms-linear-gradient(right bottom, #ccc 0%, #ccc 25%, #bbb 25%, #bbb 50%, #ccc 50%, #ccc 75%, #bbb 75%);
	background-image: -o-linear-gradient(right bottom, #ccc 0%, #ccc 25%, #bbb 25%, #bbb 50%, #ccc 50%, #ccc 75%, #bbb 75%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#bbbbbb',GradientType=0 ); / IE6-8 */
    /* the angle here is top left to bottom right */
	background-image: linear-gradient(right bottom, transparent 0%, transparent 25%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.25) 50%, #ccc 50%, transparent 75%, rgba(0,0,0,0.25) 75%);
	background-size: 30px 30px;
	width:100%;
	height:100%;
}
.diagonal_lines_pattern p{
	color:#fff;
	display: block;
	position:absolute;
	top:50%;
	left:50%;
	width:14em;
	text-align:center;
	font-family: 'Helvetica Neue',Helvetica, sans-serif;
	font-size: 60px;
	font-weight:bold;
	line-height: 1.5;
	margin-left:-7em;
	margin-top:-1em;
	text-shadow: 0px 0px 2px #686868,
                 0px 1px 1px #ddd,
                 0px 2px 1px #d6d6d6,
                 0px 3px 1px #ccc,
                 0px 4px 1px #c5c5c5,
                 0px 5px 1px #c1c1c1,
                 0px 6px 1px #bbb,
                 0px 7px 1px #777,
                 0px 8px 3px rgba(100, 100, 100, 0.4),
                 0px 9px 5px rgba(100, 100, 100, 0.1),
                ...

JavaScript

// Diagonal line Pattern CSS3