如何用Vuetify/纯HTML/CSS实现内容不溢出的圆角六边形卡片？

一、纯HTML/CSS实现 #

这个方案通过CSS mask实现带圆角的六边形形状，同时确保内部内容被严格约束在边框内，不会溢出。

实现代码 #

<div class="hex-card">
  <div class="hex-card__image">
    <img src="your-image-url.jpg" alt="Card image">
  </div>
  <div class="hex-card__content">
    <h3>卡片标题</h3>
    <p>这里是卡片描述文本，内容不会超出六边形边框</p>
    <button class="card-btn">点击按钮</button>
  </div>
</div>

.hex-card {
  width: 300px;
  height: 340px;
  position: relative;
  /* 用mask实现带圆角的六边形 */
  mask-image: 
    radial-gradient(circle at top left, transparent 12px, black 13px),
    radial-gradient(circle at top right, transparent 12px, black 13px),
    radial-gradient(circle at bottom left, transparent 12px, black 13px),
    radial-gradient(circle at bottom right, transparent 12px, black 13px),
    linear-gradient(to bottom right, black 49%, transparent 50%) 0 25%/50% 50% no-repeat,
    linear-gradient(to bottom left, black 49%, transparent 50%) 100% 25%/50% 50% no-repeat,
    linear-gradient(to top right, black 49%, transparent 50%) 0 75%/50% 50% no-repeat,
    linear-gradient(to top left, black 49%, transparent 50%) 100% 75%/50% 50% no-repeat,
    linear-gradient(black, black) 25% 0/50% 25% no-repeat,
    linear-gradient(black, black) 25% 100%/50% 25% no-repeat;
  -webkit-mask-image: 
    radial-gradient(circle at top left, transparent 12px, black 13px),
    radial-gradient(circle at top right, transparent 12px, black 13px),
    radial-gradient(circle at bottom left, transparent 12px, black 13px),
    radial-gradient(circle at bottom right, transparent 12px, black 13px),
    linear-gradient(to bottom right, black 49%, transparent 50%) 0 25%/50% 50% no-repeat,
    linear-gradient(to bottom left, black 49%, transparent 50%) 100% 25%/50% 50% no-repeat,
    linear-gradient(to top right, black 49%, transparent 50%) 0 75%/50% 50% no-repeat,
    linear-gradient(to top left, black 49%, transparent 50%) 100% 75%/50% 50% no-repeat,
    linear-gradient(black, black) 25% 0/50% 25% no-repeat,
    linear-gradient(black, black) 25% 100%/50% 25% no-repeat;
  mask-composite: add;
  -webkit-mask-composite: source-over;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.hex-card__image {
  height: 70%;
  overflow: hidden;
}

.hex-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片填满区域且被裁剪 */
}

.hex-card__content {
  height: 30%;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hex-card__content h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.hex-card__content p {
  margin: 0 0 12px;
  font-size: 14px;
  color: #666;
}

.card-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #2196F3;
  color: #fff;
  cursor: pointer;
  align-self: flex-start;
}

核心要点 #

• 使用CSS mask（兼容webkit前缀）绘制带圆角的六边形，相比clip-path能更好地处理圆角与形状的结合
• 容器设置overflow: hidden，内部图片用object-fit: cover确保被裁剪到六边形范围内
• 内容区域通过固定高度比例（30%），确保文本和按钮不会溢出边框

二、Vuetify框架实现 #

基于Vuetify的组件体系，仅需给v-card添加自定义mask样式，内部用Vuetify原生组件构建内容：

实现代码 #

<template>
  <v-card class="hex-card" width="300" height="340">
    <v-img
      src="your-image-url.jpg"
      height="70%"
      class="overflow-hidden"
    ></v-img>
    <v-card-text class="hex-card-content px-4 py-3">
      <h3 class="text-h6 mb-2">卡片标题</h3>
      <p class="text-caption mb-3">这里是卡片描述文本，内容不会超出六边形边框</p>
      <v-btn size="small" color="primary">点击按钮</v-btn>
    </v-card-text>
  </v-card>
</template>

<style scoped>
.hex-card {
  mask-image: 
    radial-gradient(circle at top left, transparent 12px, black 13px),
    radial-gradient(circle at top right, transparent 12px, black 13px),
    radial-gradient(circle at bottom left, transparent 12px, black 13px),
    radial-gradient(circle at bottom right, transparent 12px, black 13px),
    linear-gradient(to bottom right, black 49%, transparent 50%) 0 25%/50% 50% no-repeat,
    linear-gradient(to bottom left, black 49%, transparent 50%) 100% 25%/50% 50% no-repeat,
    linear-gradient(to top right, black 49%, transparent 50%) 0 75%/50% 50% no-repeat,
    linear-gradient(to top left, black 49%, transparent 50%) 100% 75%/50% 50% no-repeat,
    linear-gradient(black, black) 25% 0/50% 25% no-repeat,
    linear-gradient(black, black) 25% 100%/50% 25% no-repeat;
  -webkit-mask-image: 
    radial-gradient(circle at top left, transparent 12px, black 13px),
    radial-gradient(circle at top right, transparent 12px, black 13px),
    radial-gradient(circle at bottom left, transparent 12px, black 13px),
    radial-gradient(circle at bottom right, transparent 12px, black 13px),
    linear-gradient(to bottom right, black 49%, transparent 50%) 0 25%/50% 50% no-repeat,
    linear-gradient(to bottom left, black 49%, transparent 50%) 100% 25%/50% 50% no-repeat,
    linear-gradient(to top right, black 49%, transparent 50%) 0 75%/50% 50% no-repeat,
    linear-gradient(to top left, black 49%, transparent 50%) 100% 75%/50% 50% no-repeat,
    linear-gradient(black, black) 25% 0/50% 25% no-repeat,
    linear-gradient(black, black) 25% 100%/50% 25% no-repeat;
  mask-composite: add;
  -webkit-mask-composite: source-over;
  overflow: hidden;
}

.hex-card-content {
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>

核心要点 #

• 复用Vuetify的v-card、v-img、v-btn组件，仅需添加自定义mask样式实现六边形形状
• v-img设置height="70%"并配合overflow-hidden，确保图片被裁剪到六边形范围内
• 内容区域通过flex布局分配空间，按钮和文本不会溢出边框

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