How to put text on a CSS Triangle

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

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

  Member
LogIn