How to put text on a CSS Triangle - html

Question

I must be missing a simple step. I have made a triangle in CSS and I'm trying to put text on top of the triangle. It works if I don't have the width:0; and height:0; but the triangle does not size right without it. The text is in there, but it wont show on the triangle. Can someone assist?
.log{ /*bottom*/
width:0; height:0;
top:73.2%; left:36.4%;
z-index:2;
background-color:#E3DFD2;
border-top:12vw solid black;
border-right:9vw solid transparent ;
border-left:9vw solid transparent;
transform-origin: -10% -10%;
transition:transform .2s .1s;
color:#FFFFFF;
}
.log:hover{
border-top:12vw solid white;
border-right:9vw solid transparent ;
border-left:9vw solid transparent;
opacity:.5;
color:#000000;
}
Here is the HTML
<a class="log" href="#"><p class="login">Member LogIn</p></a>
I want it to look something like this:

Answer 1

Maybe try something like this :
body{
background: red;
}
.log{
position: relative;
border-bottom:100px solid transparent ;
border-left:100px solid transparent;
border-top: 180px solid black;
border-right:100px solid transparent;
display: inline-block;
transition: all .25s ease;
}
.log:hover{
border-top-color: rgba(255, 255, 255, .5);
}
.log:hover .login{
color: #000;
}
.login{
position: absolute;
color: #fff;
left: -50%;
top: -90px;
display: block;
width: 200px;
height: 180px;
transform: translate(-50%,-50%);
text-align: center;
box-sizing: border-box;
padding: 30px 0;
transition: all .25s ease;
}
<a class="log" href="#">
<span class="login">Member<br>LogIn</span>
</a>

Answer 2

Try out this
.up {
width: 0px;
height: 0px;
border-style: inset;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent blue transparent;
float: left;
transform:rotate(180deg);
display:block
}
.up span {
text-align: center;
left: -47px;
top:25px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
transform:rotate(180deg);
display:block;
}
<a class="up" href="#">
<span>TEXT TEXT TEXT</span>
</a>