<template>
    <div class="triangle">
        <i class="left-top"></i>
        <i class="right-top"></i>
        <i class="left-bottom"></i>
        <i class="right-bottom"></i>
        <slot></slot>
    </div>
</template>

<script>
  export default {
    name: 'triangle',
    data() {
      return {}
    },
    mounted() {

    },
    methods: {}
  }
</script>

<style lang=scss>
    @mixin triangle-icon() {
        width:0;
        height: 0;
        border: 0.08rem solid transparent;
        border-left-color: #4EFFFD;
        position: absolute;
    }
    .triangle{
        border: 1px solid #62BAFF;
        height: 100%;
        position: relative;
        padding: 0 0.32rem;
        .left-top{
            @include triangle-icon;
            transform: rotate( -135deg);
            left: -0.08rem;
            top: -0.09rem;
        }
        .right-top{
            @include triangle-icon;
            top: -0.08rem;
            right: -0.08rem;
            transform: rotate(-45deg);

        }
        .left-bottom{
            @include triangle-icon;
            left: -0.09rem;
            bottom: -0.08rem;
            transform: rotate(135deg);
        }
        .right-bottom{
            @include triangle-icon;
            transform: rotate(45deg);
            right: -0.08rem;
            bottom: -0.08rem;
        }
    }
</style>
