Responsive, sticky, css shape with icon inside, possible?

Question

I have used a various amount of codes for CSS triangles, but after trying to place text or an icon inside the div it continues to be blown out in some manner.

The picture below is the goal to be obtained with CSS. Please help.

Is this possible?

Answer 1

Try this way:

<div id="container">
  <div id="triangle-bottomleft"></div>
  <div id="smile">🙂</div>
</div>

#container {
  width: 100px;
  height: 100px;
  position: relative;
}

#triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 100px solid red; 
  border-right: 100px solid transparent;
  position: absolute;
  left: 0;
  bottom: 0;
}

#smile {
  position: absolute;
  left: 20%;
  bottom: 20%;
}

codepen