Element Plus UI进阶：打造高大上的el-dialog标题，告别单调默认样式！

前言

在日常开发中，我们经常使用Element Plus UI的el-dialog组件。但原生的dialog标题样式太过朴素，缺乏视觉冲击力，今天我们就来聊聊如何通过CSS魔法，将普通的dialog标题升级为蓝色等腰梯形的高大上样式！

设计思路

参考现代UI设计趋势，我们想要实现：
✨ 等腰梯形造型，增加视觉层次感
🎨 蓝色主题，提升品牌识别度
💫 底部高亮，强化交互反馈
🔄 平滑过渡，提升用户体验

请添加图片描述

实现方案

 <template>
  <div class="layout-padding" style="background-color: #d7e9f6;">
	 <el-dialog v-model="transfer_show" width="500px">
		      <template #title>
		        <div class="trapezoid-dialog-title">
		          <span class="title-text">el-dialog优化</span>
		        </div>
		      </template>
		</el-dialog>
  </div>
</template>
<style scoped lang="scss">
:deep(.el-dialog){
  padding: 0px;
}

.trapezoid-dialog-title {
  position: relative;
  background-color: #6EBBE6;
  color: #fff;
  padding: 12px 20px;
  cursor: pointer;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 16px) 100%, 16px 100%);
  width: 150px;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s ease;
  text-align: center;
}

.trapezoid-dialog-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #409eff;
}

.trapezoid-dialog-title:hover {
  background-color: #5aabd5;
}
</style>