console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>梯形tab按钮-基于clip-path path函数实现</title>
	<style>
		.wrap {
			background-color: #eee;
			margin: 0 auto;
			padding: 10px;
		}

		.tabs {
			display: flex;
            flex-direction: row-reverse; 
			align-items: start;
			justify-content: start;
            margin-left: 40px;
		}

		.tab {
			flex-grow: 0;
            flex-shrink: 0;
			width: 100px;
			padding-right: 75px;
			height: 50px;
			cursor: pointer;
			position: relative;
			text-align: center;
			line-height: 50px;
			clip-path: path('M 0,0 L 100 0 C 125,0 125,50 175,50 L 0, 50 Z');
			background-color: cyan;
			margin-left: -40px;
		}

		.tab.active {
			background-color: blue;
			color: #fff;
		}

		.content-wrap {
			min-height: 200px;
			background-color: #fff;
		}
	</style>
	<script src="https://cdn.bootcdn.net/ajax/libs/alpinejs/3.10.3/cdn.min.js" defer>

	</script>
	<script src="https://unpkg.com/@unocss/runtime">

	</script>
	<script>
		// pass unocss options
    window.__unocss = {
      rules: [
        // custom rules...
      ],
      presets: [
        // custom presets...
      ],
      // ...
    }
	</script>
</head>

<body>
	<div class="wrap" x-data="initData()">
		<div class="tabs">
			<template x-for="index in 3" :key="index">
				<div @click="onTabClick(index)" class="tab" :class="{ 'active': activeIndex == index }" x-text="'标签' + index">
				</div>
			</template>
		</div>
		<div class="content-wrap">

		</div>
	</div>

	<script>
		function initData() {
      return {
        activeIndex: 1,
        onTabClick(index) {
          this.activeIndex = index
        }
      }
    }
	</script>

</body>

</html>