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

我一定错过了一个简单的步骤。我在CSS中做了一个三角形，我正试图把文本放在三角形的顶部。如果我没有

宽度：0，它就可以工作和<代码>高度：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>



我希望它看起来像这样：
试试这个


.up{
宽度：0px；
高度：0px；
边框样式：插图；
边框宽度：0 100px 173.2px 100px；
边框颜色：透明蓝色透明；
浮动：左；
变换：旋转（180度）；
显示：块
}
.上跨{
文本对齐：居中；
左：-47px；
顶部：25px；
位置：相对位置；
宽度：93px；
高度：93px；
边际：0px；
变换：旋转（180度）；
显示：块；
}
也许可以尝试以下方法：


正文{
背景：红色；
}
.日志{
位置：相对位置；
边框底部：100px实心透明；
左边框：100px实心透明；
边框顶部：180像素纯黑；
右边框：100px实心透明；
显示：内联块；
过渡：全部.25秒缓解；
}
.log:悬停{
边框顶部颜色：rgba（255、255、255、.5）；
}
.log:hover.login{
颜色：#000；
}
.登录{
位置：绝对位置；
颜色：#fff；
左-50%；
顶部：-90px；
显示：块；
宽度：200px；
高度：180像素；
转换：翻译（-50%，-50%）；
文本对齐：居中；
框大小：边框框；
填充：30px0；
过渡：全部.25秒缓解；
}
给你。你把整个三角形作为一个标签？还是只有内部文本@我只是一个有趣的程序员