How to create this arrow up in css?

Question

How to create this arrow in css ?

I tried it with css after but nothing works as expected.

 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>

Please help.

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>