I'm trying to create a trapezoid button using CSS.
Here is the intended look:
https://i.sstatic.net/0vqlk.png
However, my current implementation looks like this:
https://i.sstatic.net/QrR4t.png
The button appears fine but there seems to be some excess space below it. It's almost like an unwanted margin, even though I haven't added any margin in the code.
My button code snippet is as follows:
<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 decrease the height of the trapezoid class, the extra space diminishes. However, this adjustment causes the text to become invisible...
.trapezoid {
height: 60px; // adjusted from 120px
clip-path: polygon(0 0, 100% 0, 84% 41%, 16% 41%);
}