使用clip-path时如何让图标置于元素上方且不被裁切？

clip-path会裁切元素及其所有子元素的可见区域，你的电话图标因为设置了position-relative bottom-50超出父元素范围，所以被裁切掉了。下面是两种可行的解决方法：

方法一：用伪元素实现卡片多边形背景（推荐） #

把卡片的形状交给伪元素实现，父元素本身不设置clip-path，子元素超出的部分就不会被裁切：

修改后的HTML #

<div class="col-md-3 col-5 rounded-5 d-flex flex-column justify-content-center align-items-center contact-card">
    <i class="fa-solid icon fa-phone text-yellow-medium position-relative bottom-50 mt-5"></i>
    <p class="fs-4">+351 917 037 172</p>
</div>

修改后的CSS #

.contact-card {
  position: relative;
  background: transparent; /* 移除原bg-white，交给伪元素实现 */
}

.contact-card::before {
  content: '';
  position: absolute;
  inset: 0; /* 等同于top:0; right:0; bottom:0; left:0 */
  background-color: white;
  clip-path: polygon(100% 0, 0% 0, 20% 100%, 100% 100%);
  z-index: -1; /* 让伪元素在内容下方，不遮挡图标和文字 */
  border-radius: 0.5rem; /* 对应Bootstrap的rounded-5 */
}

方法二：将图标移出父元素，独立定位 #

把电话图标放到父卡片外面，用绝对定位相对于外层容器定位，脱离clip-path的裁切范围：

修改后的HTML #

<div class="position-relative">
  <div class="col-md-3 col-5 rounded-5 bg-white d-flex flex-column justify-content-center align-items-center contact-card">
      <p class="fs-4">+351 917 037 172</p>
  </div>
  <i class="fa-solid icon fa-phone text-yellow-medium position-absolute" style="top: -25px; left: 50%; transform: translateX(-50%);"></i>
</div>

保留原有CSS #

.contact-card {
  clip-path: polygon(100% 0, 0% 0, 20% 100%, 100% 100%);
}

两种方法都能实现你想要的效果，方法一无需额外嵌套元素，结构更简洁，更适配Bootstrap的布局逻辑。

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