designer-hub/packages/app/src/components/tilted-button.vue

<script lang="ts" setup>
defineProps({
  customClass: {
    type: String,
    default: () => '',
  },
  color: {
    type: String as PropType<'black' | 'white'>,
    default: () => 'black',
  },
  size: {
    type: String as PropType<'default' | 'small' | 'large'>,
    default: () => 'default',
  },
})
</script>
<template>
  <view
    class="base inline-block text-white relative box-border text-3.5 font-400 line-height-5 px-4 py-1"
    :class="[size, color, customClass]"
  >
    <view class="h-full ml-2 flex items-center justify-center">
      <slot></slot>
    </view>
  </view>
</template>
<style lang="scss">
.base {
  border-style: solid;
  border-image-slice: 10 10 10 25 fill;
  border-image-width: 20rpx 20rpx 20rpx 40rpx;
  border-image-outset: 0 0 0 0;
  border-image-repeat: stretch stretch;
}
.black {
  border-image-source: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MiIgaGVpZ2h0PSIzNSIgdmlld0JveD0iMCAwIDkyIDM1IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOS45MzAxNSA1LjI3NjI0QzExLjY3MTMgMi4wMjc1NCAxNS4wNTgzIDAgMTguNzQ0MSAwSDgyQzg3LjUyMjkgMCA5MiA0LjQ3NzE1IDkyIDEwVjI1QzkyIDMwLjUyMjggODcuNTIyOSAzNSA4MiAzNUg5LjAzNDUxQzIuMjMyMiAzNSAtMi4xMTEzMSAyNy43NDQyIDEuMTAxOTQgMjEuNzQ4Nkw5LjkzMDE1IDUuMjc2MjRaIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+Cjwvc3ZnPg==');
}
.white {
  border-image-source: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTE1IiBoZWlnaHQ9IjQ0IiB2aWV3Qm94PSIwIDAgMTE1IDQ0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBpZD0iUmVjdGFuZ2xlIDEzNTAiIGQ9Ik0xNS4xNjQ0IDUuMzcyMzhDMTYuODg4MSAyLjA3MDMyIDIwLjMwNDMgMCAyNC4wMjkyIDBIMTA1QzExMC41MjMgMCAxMTUgNC40NzcxNSAxMTUgMTBWMzRDMTE1IDM5LjUyMjggMTEwLjUyMyA0NCAxMDUgNDRIOS44NTA2NUMzLjA5MTM5IDQ0IC0xLjI1NTYyIDM2LjgyNzEgMS44NzIzMSAzMC44MzUxTDE1LjE2NDQgNS4zNzIzOFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
  @apply text-black text-base font-normal font-['PingFang_SC'] leading-tight;
}
.large {
  @apply h-11;
}
</style>