带有图标的响应式，粘性，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