css - 响应式、粘性、css 形状，里面有图标，可能吗？

Question

我为 CSS 三 Angular 形使用了各种代码，但在尝试将文本或图标放入 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