CSS实现直角梯形按钮：解决底部多余空白问题

你当前的问题出在用父容器div.trapezoid做裁剪，但父容器高度设置过大（120px）导致底部出现空白；缩小高度后又因为clip-path的裁剪范围没覆盖按钮文字区域，导致文字被裁掉。以下是两种可行的解决方案：

方案1：直接给按钮应用clip-path（推荐） #

去掉多余的父容器，把梯形裁剪效果直接应用在按钮元素上，这样元素自身高度就是按钮的有效高度，不会产生多余空白，同时文字自然处于裁剪后的可见区域内。

修改后的代码：

<template>
  <button class="trapezoid" :form="form" :type="props.type">{{ props.text }}</button>
</template>

<script setup>
...
</script>

<style>
.trapezoid {
  width: 220px;
  height: 50px;
  font-size: 20px;
  background-color: $colorPrimary;
  text-transform: uppercase;
  color: $colorTextSecondary;
  font-weight: 500;
  /* 调整裁剪路径，底部裁剪线对齐按钮高度，左右收窄形成梯形 */
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}
</style>

方案2：保留父容器的优化写法 #

如果必须保留父容器结构，可通过定位让按钮填满父容器，同时把父容器高度设为按钮高度，确保裁剪范围覆盖按钮全部区域：

<template>
  <div class="trapezoid">
    <button :form="form" :type="props.type">{{ props.text }}</button>
  </div>
</template>

<script setup>
...
</script>

<style>
.trapezoid {
  position: relative;
  width: 220px;
  height: 50px; /* 与按钮高度一致 */
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}

.trapezoid button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 20px;
  background-color: $colorPrimary;
  text-transform: uppercase;
  color: $colorTextSecondary;
  font-weight: 500;
  border: none; /* 若有默认边框可去掉 */
}
</style>

原理说明 #

• 方案1中，clip-path的84% 100%和16% 100%表示底部左右两个端点在按钮宽度的16%和84%位置，刚好形成梯形斜边，且整个裁剪范围覆盖按钮的50px高度，文字不会被裁剪。
• 方案2通过绝对定位让按钮填满父容器，父容器高度与按钮一致，避免了多余空白，同时裁剪路径覆盖整个容器，确保按钮内容可见。

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