如何在css中创建这个向上箭头？

div.arrow {
    width: 12vmin;
    height: 12vmin;
    box-sizing: border-box;
    left: 0%;
    top: 0%;
    transform: rotate(-45deg);
    
	}
div.arrow::before {
		content: '';
		width: 100%;
		height: 100%;
		border-width: .8vmin .8vmin 0 0;
		border-style: solid;
		border-color: #fafafa;
		transition: .2s ease;
		display: block;
		transform-origin: 100% 0;
		border-color: black;
		transform: scale(.8);
	}

	
div.arrow:after {
		content: '';
		float: left;
		position: relative;
		top: -100%;
		width: 100%;
		height: 100%;
		border-width: 0 .8vmin 0 0;
		border-style: solid;
		border-color: #fafafa;
		transform-origin: 100% 0;
		transition:.2s ease;
		transform: rotate(45deg);
		border-color: black;
		height: 200%;
	}

<div class="arrow"></div>