applet/components/HeadlineDecorate/HeadlineDecorate.vue

<template>
	<view :class="['headline-dcorate' , reversal ? 'reversal-dcorate'  :'']">
		<template v-for="(item , index) in count">
			<view class="item" :style="{width:getW(index)+'rpx',height:h+'rpx' }">
				<view class="item-dcorate" :style="{width:w+'rpx',height:h+'rpx',backgroundColor:bgcolor}" />
			</view>
		</template>
	</view>
</template>

<script name="HeadlineDecorate" lang="ts" setup>
	const $Props = defineProps({
		w: {
			type: Number,
			default: 23
		},
		h: {
			type: Number,
			default: 27
		},
		bgcolor: {
			type: String,
			default: '#FCCAC4'
		},
		count: {
			type: Number,
			default: 3
		},
		reversal: {
			type: Boolean,
			default: false
		}
	});

	const getW = (index) => {
		return index === $Props.count - 1 ? $Props.w : $Props.w * 0.8;
	}
</script>

<style lang="scss" scoped>
	.reversal-dcorate{
		transform: rotate(180deg);
	}
	.headline-dcorate {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;

		.item {
			.item-dcorate {
				clip-path: polygon(0% 0%, 60% 0%, 100% 50%, 60% 100%, 0% 100%, 40% 50%);
			}

			// &:nth-child(n+2){
			// 	transform: translateX(-20%);
			// }
		}
	}
</style>