Dashed crossing

dash dash dash dash dash dash dash dash

by AntowaKartowa

HTML

<div class="dashed"></div>

SCSS

.dashed {
	position: relative;
	width: 400px;
	height: 200px;
	margin: 50px auto;
	background-color: #eee;
	
	&:before,
	&:after {
		content: '';
		position: absolute;
	}
	
	&:before {
		height: 2px;
		width: 100%;
		top: 40%;

		background-image: linear-gradient(to right, #aaa 8px, transparent 0);
		background-size: 16px 1px;
	}

	&:after {
		width: 2px;
		height: 100%;
		left: 32px;

		background-image: linear-gradient(to bottom, #aaa 8px, transparent 0);
		background-size: 1px 16px;
	}
}