Wie man Text auf ein CSS-Dreieck setzt

Question

Ich muss einen einfachen Schritt vermissen. Ich habe ein Dreieck in CSS erstellt und versuche, Text auf das Dreieck zu legen. Es funktioniert, wenn ich nicht die width:0; und height:0; habe, aber das Dreieck nicht ohne es richtig ist. Der Text ist da drin, aber er wird nicht auf dem Dreieck angezeigt. Kann jemand helfen? Hier

 .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; 
    } 

ist die HTML-

<a class="log" href="#"><p class="login">Member LogIn</p></a> 

ich es so etwas wie dies aussehen soll:

Answer 1

Vielleicht so etwas wie diese versuchen:

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

versuchen, diese

.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>