CS实现票据样式效果

效果图

代码

<template>
<div class="outer">
			<div class="outer-container"></div>
		</div>
</template>
<script lang='ts'>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router' // 引入路由

export default {
  name: '',
  setup() {
    let router = useRouter(), route = useRoute();
    const data = reactive({

    })
    onBeforeMount(() => {
    })
    onMounted(() => {
    })
    const refData = toRefs(data);
    return {
      ...refData,
    }
  }
};
</script>

<style scoped>
.outer-container {
				margin: 40px;
				width: 200px;
				height: 300px;
				border: 2px solid red;
				position: relative;
				z-index: 1;
			}

			.outer-container::before,
			.outer-container::after {
			  content: "";
			  width: 50px;
			  height: 25px;
			  background-color: white;
			  border: 2px solid red;
			  position: absolute;
			}
			
			.outer-container::before {
			  top: -2px;
			  left: calc(50% - 25px);
			  border-radius: 0 0 50% 50% / 0 0 100% 100%;
			  border-top: none;
			}
			
			.outer-container::after {
			  bottom: -2px;
			  left: calc(50% - 25px);
			  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
			  border-bottom: none;
			}   
</style>