如何在position:absolute的三角形div中居中FontAwesome图标？

嘿，我懂你要实现的效果——给图片容器加个左下角的三角形标记，还要把FontAwesome的加号图标稳稳居中在三角形里对吧？我把你的代码补全并优化了，直接就能用：

完整HTML代码 #

<div class="image-wrapper">
  <img src="image-source" alt="示例图片">
  <div class="bottom-triangle">
    <i class="fa fa-plus"></i>
  </div>
</div>

完整Sass代码 #

.image-wrapper {
  position: relative;
  /* 让容器自适应图片宽度 */
  display: inline-block;

  img {
    min-width: 100%;
    display: block; /* 去掉图片默认的底部间隙 */
  }

  .bottom-triangle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    /* 数值控制三角形大小，可按需调整 */
    border-width: 0 0 60px 60px;
    /* 三角形填充色，透明部分对应好方向 */
    border-color: transparent transparent #2c3e50 transparent;

    .fa-plus {
      position: absolute;
      /* 用transform实现自适应居中，比固定margin更灵活 */
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #ffffff;
      font-size: 20px; /* 图标大小按需调整 */
    }
  }
}

关键细节说明 #

• .image-wrapper 设置 position: relative，是为了让内部的三角形元素以容器为基准定位，而不是整个页面。
• 三角形是靠CSS border属性绘制的：把三个方向的border设为透明，只保留一个方向的颜色，就能形成三角形形状，调整border-width可以改变三角形的大小和比例。
• FontAwesome图标居中的核心是 transform: translate(-50%, -50%)，配合top:50%和left:50%，不管三角形大小怎么变，图标都能精准居中。

内容的提问来源于stack exchange，提问作者Belial