如何在CSS三角形上放置文字 [英] How to put text on a CSS Triangle

问题描述

我一定错过了一个简单的步骤.我在CSS中制作了一个三角形，并尝试将文本放在该三角形的顶部.如果我没有width:0;和height:0;，它会起作用，但是没有它，三角形的大小将不正确.文本在其中，但不会显示在三角形上.有人可以协助吗?

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

这是HTML

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

我希望它看起来像这样:

I want it to look something like this:

推荐答案

也许可以尝试以下方法:

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>

这篇关于如何在CSS三角形上放置文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！