基于clip-path属性的多边形div内图标padding适配问题求助

clip-path是直接对元素可视区域进行裁切的，而你用的padding: auto根本无效——CSS里padding属性不支持auto值，这就是这个尝试没用的原因。图标被裁切，是因为图标直接放在了被裁切的元素内部，元素边界被clip-path修改后，图标延伸到了裁切区域之外。

下面给两种实用的解决方法：

方法1：用内层容器隔离内容和裁切效果 #

在外层容器上应用clip-path，内层专门放图标并设置内边距，这样内层的padding能让图标远离裁切边界，不会被裁到。

修改后的完整代码：

CSS #

#container {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  background: rgba(176, 75, 80, 0.5);
}

#example {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: rgba(76, 175, 80, 0.5);
  clip-path: polygon(0 25%, 100% 0%, 83% 60%, 7% 82%);
}

#icon-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 10px; /* 按需调整内边距大小 */
  box-sizing: border-box; /* 防止padding撑大容器 */
}

.fas {
  color: red;
}

HTML #

<script defer src="https://pro.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />

<div id="container">
  <div id="example">
    <div id="icon-wrapper">
      <i class="fas fa-star fa-fw filled"></i>
      <i class="fas fa-star fa-fw filled"></i>
      <i class="fas fa-star fa-fw filled"></i>
      <i class="fas fa-star fa-fw filled"></i>
      <i class="fas fa-star fa-fw filled"></i>
      <i class="fas fa-star fa-fw filled"></i>
    </div>
  </div>
</div>

方法2：调整clip-path路径，向内收缩留空间 #

直接修改polygon的坐标值，让裁切边界向内偏移，给内容留出足够空间。比如把原来的每个坐标点都向内收缩一定比例，示例中调整后的路径如下：

修改后的#example样式：

#example {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  top: 50px;
  left: 50px;
  color: red;
  width: 100px;
  height: 100px;
  background: rgba(76, 175, 80, 0.5);
  /* 向内收缩后的clip-path路径 */
  clip-path: polygon(5% 30%, 95% 5%, 78% 55%, 12% 77%);
}

另外注意你原来的CSS里有语法错误：text-align; center; 应该改成 text-align: center;，不过用flex布局的align-items: center 更适合垂直居中图标。

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