如何在CSS三角形上放置文本

Question

我必須缺少一個簡單的步驟。我在CSS中創建了一個三角形，並且試圖將文本放在三角形的頂部。它可以工作，如果我沒有width:0;和height:0;但三角形沒有它的大小正確。文字在那裏，但它不會顯示在三角形上。有人可以協助嗎？

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

下面是HTML

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

我希望它看起來是這樣的：

Answer 1

也許嘗試這樣的事：

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

嘗試這個

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