如何实现随文本自适应变化的CSS三角形悬停效果？

传统用border绘制的三角形无法自适应内容尺寸，推荐采用CSS clip-path或旋转容器+overflow:hidden两种方案，它们能跟随文本内容自动调整大小，适配masonry布局也更灵活。

方案一：clip-path 实现自适应三角形 #

直接通过裁剪容器生成三角形，容器会随文本宽高自动适配，代码示例：

.triangle-container {
  position: relative;
  display: inline-block;
  padding: 1rem;
  background: #362FFF;
  /* 裁剪出右下角三角形，可按需调整路径参数 */
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.triangle-container p {
  color: #fff;
  margin: 0;
  text-align: center;
}

• 优势：代码简洁，完全自适应内容，无需手动计算尺寸
• 悬停效果实现：直接给.triangle-container添加:hover样式，比如修改背景色或裁剪路径

方案二：旋转容器+overflow:hidden 实现 #

通过旋转父容器，配合overflow裁剪出三角形，同时让文本保持正向显示：

.triangle-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: fit-content;
  height: fit-content;
}

.triangle {
  position: absolute;
  top: 0;
  right: 0;
  width: 141%; /* 1.41≈√2，确保旋转后覆盖容器 */
  height: 141%;
  background: #362FFF;
  transform: rotate(45deg);
  transform-origin: bottom right;
}

.triangle p {
  position: relative;
  color: #fff;
  margin: 0;
  padding: 1rem;
  transform: rotate(-45deg);
  transform-origin: bottom right;
  top: 50%;
  right: -25%;
}

• 优势：兼容性略优于clip-path，支持部分旧版浏览器，同样自适应文本内容
• 注意：可根据文本长度微调padding和位置参数，保证文本完全显示在三角形内

适配Masonry布局的注意事项 #

• 三角形容器需设置为position: relative，且不指定固定宽高，让它随内容自动撑开
• 若Masonry基于JS计算布局，需在文本加载完成后触发重新布局，避免尺寸计算偏差

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