Text above div with borders

2

Talk the guys! I have a div. Presentation, I applied borders to it to become a triangle. Beauty, but I want to put a text above, but with the modified edges of the presentation, it does not stay aligned. How can I improve this code? Thank you guys! :)

CODE:

.apresentacao {
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-top: 100px solid transparent;
  border-left: 100px solid #f0ad4e;
  border-bottom: 100px solid #f0ad4e;
}
<div class="apresentacao">
  <div class="texto">
    Aqui vem um texto qualquer
    <br/>texotexto.
  </div>

</div>
    
asked by anonymous 21.12.2016 / 13:30

1 answer

5

See if that's it:

.apresentacao {
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-top: 100px solid transparent;
  border-left: 100px solid #f0ad4e;
  border-bottom: 100px solid #f0ad4e;
}
.content {
  position: relative;
  width: 200px;
  height: 200px;
}
.texto {
  width: 50px;
  bottom: 10px;
  position: absolute;
  left: 10px;
}
<div class="content">
  <div class="apresentacao">
    <div class="texto">
      Aqui vem um texto qualquer
      texto
    </div>
  </div>
</div>
    
21.12.2016 / 13:36