How to create a triangle with a div.

by Ian Hazzard

HTML

<div class="triangle"></div>

CSS

.triangle {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	position: relative;
	margin: 20% auto;
    animation: triangle 10s infinite;
}

.triangle:after {
    content: "add a border";
	position: absolute;
	width: 300px;
	top: 200px;
	text-align: center;
	animation: triangle-after 10s infinite;
}

@keyframes triangle {
    0% {
    	border: 1px solid black;
		width: 100px;
		height: 100px;
    }
	15% {
		border: 1px solid black;
	}
	20% {
		border: 50px solid black;
	}
	30% {
		width: 100px;
		height: 100px;
	}
	35% {
		width: 0;
		height: 0;
	}
	50% {
		border: 50px solid black;
	}
	75% {
		border-top: 50px solid transparent;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
	}
	95% {
		width: 0;
		height: 0;
		border-top: 50px solid transparent;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-bottom: 50px solid black;
	}
}
@keyframes triangle-after {
    0% {
    	content: "add a border";
    }
	15% {
		content: "add a border";
	}
	20% {
		content: "add a border";
	}
	30% {
		content: "set height and width to 0";
	}
	35% {
		content: "set height and width to 0";
	}
	50% {
		content: "make top, left and right borders transparent";
	75% {
		content: "make top, left and right borders transparent";
	}
	100% {
		content: "make top, left and right borders transparent";
	}
}