Геометрические фигуры в css

body { 
  background: #ccc; 
} 
 
.container { 
  background: #fff; 
  border-radius: 10px; 
  overflow: hidden; 
  width: 200px; 
  text-align: center; 
  padding: 100px 0; 
  position: relative; 
} 
 
.triangle { 
  width: 0; 
  height: 0; 
  border-top: 100px solid red; 
  border-right: 100px solid transparent; 
  position: absolute; 
  left: 0; 
  top: 0; 
} 
 
.triangle-text { 
  position: absolute; 
  top: -78px; 
  left: -4px; 
  width: 70px; 
  transform: rotate(-45deg); 
}

<div class="container"> 
  <div class="triangle"> 
    <span class="triangle-text">popular</span> 
  </div> 
  sdasdas 
</div>