<style>

*[class^="chevron"] {
	position: relative;
	width: 100%;
	height: 100%;
}

.chevron-up {
	transform: rotateX(0deg);
}

.chevron-down {
	transform: rotateX(180deg);
}

*[class^="chevron"]::before,
*[class^="chevron"]::after {
	position: absolute;
	top: 37.5%;
	width: 50%;
	height: 10%;
	content: "";
	background-color: black;
}

*[class^="chevron"]:before {
	left: 0;
	transform: skewY(-45deg);
}

*[class^="chevron"]:after {
	right: 0;
	transform: skewY(45deg);
}

</style>

<div class="chevron-down" style="width: 10px; height: 10px;"></div>
<div class="chevron-up" style="width: 10px; height: 10px;"></div>