css 三角形上的响应式 vue 样式绑定不起作用

Question

I added a style binding to my button (a CSS triangle) that should change the border width according to the screen size, but the styles are not applied to the element or somehow not visible.

(The classes other than .triangle are from TailwindCSS but they should be self-explanatory)

The HTML:

<button
    class="triangle absolute bottom-0 z-30"
    :style="{
        borderLeft: triangle_width + ' solid transparent',
        borderRight: triangle_width + ' solid transparent',
        borderBottom: triangle_width + ' solid transparent'
    }"
    @click="action"
    @mouseover="toggle"
    @mouseleave="toggle"
/>

The CSS:

.triangle:hover {
  border-color: transparent transparent white transparent;
}

.triangle {
  transition-property: border-color;
  transition-duration: 200ms;
  width: 0;
  height: 0;
  margin-bottom: 3px;
}

The triangle_width property is working as it should but the style isn't applied. The triangle should only be visible when I hover over it but right now it isn't.

Thanks for any advice on how to solve this problem. If more information is needed feel free to ask.

Answer 1

I forgot the px after the triangle_width in the style binding:

{
        borderLeft: this.triangle_width + 'px solid transparent',
        borderRight: this.triangle_width + 'px solid transparent',
        borderBottom: this.triangle_width + 'px solid transparent'
}