如何在css中创建此箭头？

Question

如何在css中创建此箭头？

我用css尝试过，但没有任何效果如预期的那样。

div.arrow {
    width: 12vmin;
    height: 12vmin;
    box-sizing: border-box;
    left: 0%;
    top: 0%;   
	}
div.arrow::before {
		content: '';
		width: 100%;
		height: 100%;
		border-width: 1px;
		border-style: solid;
		border-color: #fafafa;
		display: block;
		border-color: black;
	}

	
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;
		border-color: black;
		height: 200%;
	}

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

请帮忙。

Answer 1

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>