Search code examples
cssvue.jsuser-interfacesass

Rectangular Trapezoid using CSS - remove extra space

I want to make trapezoid button in CSS.

It needs to look like this:

enter image description here

I currently have this:

enter image description here

The button look good but there is extra space below it. It's like a margin, but I didn't add any margin to it.

My button code:

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

<script setup>
...
</script>

<style>
button {
  width: 220px;
  height: 50px;
  font-size: 20px;
  background-color: $colorPrimary;
  text-transform: uppercase;
  color: $colorTextSecondary;
  font-weight: 500;
}

.trapezoid {
  height: 120px;
  clip-path: polygon(0 0, 100% 0, 84% 41%, 16% 41%);
}
</style>

When i reduce the height of trapezoid class, that extra space shrinks, but my text isn't visible anymore...

.trapezoid {
  height: 60px; // not 120px anymore
  clip-path: polygon(0 0, 100% 0, 84% 41%, 16% 41%);
}

enter image description here

Solution

  • remove the height and change the 41% to 100%

    button {
  width: 100%;
  height: 50px;
  font-size: 20px;
  background-color: red;
  text-transform: uppercase;
  border: none;
  font-weight: 500;
}

.trapezoid {
  width: 220px;
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}
    <div class="trapezoid">
  <button :form="form" :type="props.type">text</button>
</div>