Адаптивная, липкая, css форма с иконкой внутри, возможно?

Question

Я использовал различное количество кодов для треугольников CSS, но после попытки поместить текст или значок в div он продолжает каким-то образом выдуваться.

Рисунок ниже - это цель, которую можно получить с помощью CSS.Пожалуйста помоги.

Возможно ли это?

Answer 1

Попробуйте следующим образом:

<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