如何使用CSS创建六边形形状 用作网站定价区域卡片

目标形状特征：普通矩形轮廓基础上，左上角做斜切倒角、右侧边缘中部带有向外突出的三角标识，轮廓无生硬直角，适合突出热门定价套餐。

实现方案 #

无需引入切图、无需多层嵌套元素，结合两个CSS特性即可实现边缘清晰无锯齿的形状效果，同时完美适配响应式布局：

• 使用clip-path多边形裁切能力，直接将普通矩形容器裁切为目标轮廓
• 通过伪元素补全阴影、分层渐变效果，解决clip-path原生不支持外阴影的问题

可直接复用的代码 #

首先是适配定价内容的基础HTML结构：

<div class="pricing-card">
  <h3>基础版套餐</h3>
  <p class="price">¥99/月</p>
  <ul class="benefit-list">
    <li>10G存储额度</li>
    <li>5个项目协作权限</li>
    <li>7*12小时客服支持</li>
  </ul>
  <button class="cta-btn">立即购买</button>
</div>

对应的样式代码：

.pricing-card {
  /* 基础布局参数 */
  width: 320px;
  padding: 40px 28px 32px;
  position: relative;
  /* 核心形状定义，数值可按视觉需求调整 */
  clip-path: polygon(
    0 36px,
    36px 0,
    100% 0,
    100% calc(50% - 18px),
    calc(100% + 18px) 50%,
    100% calc(50% + 18px),
    100% 100%,
    0 100%
  );
  /* 卡片视觉样式 */
  background: linear-gradient(145deg, #4338ca, #7c3aed);
  color: #fff;
}
/* 模拟卡片外阴影，避免被裁切 */
.pricing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(67, 56, 202, 0.3);
  filter: blur(12px);
  clip-path: inherit;
}

实际开发注意事项 #

• 不要直接给卡片本体设置box-shadow：clip-path会将所有超出裁切轮廓的内容（包括外阴影）直接裁剪掉，需要阴影效果就参考上面的伪元素实现方案，在卡片下层叠一个同形状的模糊半透明块模拟
• 响应式适配时不要固定像素尺寸：如果需要在移动端缩放卡片，可以将裁切用的硬编码像素值替换为容器查询单位cqw，避免不同屏幕下形状比例失调
• 卡片内部元素要预留足够安全边距：尤其是右侧三角突出的边界位置，不要把按钮、链接等可交互元素放在裁切边缘，避免被截断显示不全

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