响应式、粘性、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

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

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

css

icons

sticky

responsive