<div class="firebase">
  <div class="parent_triangel">
    <div class="triangel"></div>
  </div>
  <h1 class="firbase_title">Firebase</h1>
</div>
* {margin:0;padding:0}
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
body{ 
  width:100vw;
  height:100vh;
  background: #1d1e22;
  display: flex;
	flex-direction:column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
  .firebase{
    position:relative;
    .parent_triangel {
        width: 0;
        height: 0;
        border-left: 40px solid transparent;
        border-right: 160px solid transparent;
        border-bottom: 220px solid #efa61c;
        position:relative;
      &:after {
        content: '';
        position:absolute;
        width: 0;
        height: 0;
        opacity:.8;
        top:25px;
        left: -40px;
        z-index:2;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 195px solid #eb8325;
      }
      .triangel{
        width: 0;
        height: 0;
        top:40px;
        left:-40px;
        z-index:3;
        position:relative;
        border-left: 150px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 180px solid #f4cb2c;
        &:before {
          content: '';
          position:absolute;
          width: 0;
          height: 0;
          top:180px;
          left: -150px;
          border-left: 100px solid transparent;
          border-right: 100px solid transparent;
          border-top: 50px solid #f4cb2c;
        }
      }
    }
    .firbase_title{
      color: #fff;
      margin-top: 2em;
      text-align:center;
      font-family: 'Roboto', sans-serif;
      letter-spacing: 1px;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.