纯css实现倾斜tab切换，并且加上两边圆角

最新推荐文章于 2025-05-27 21:41:06 发布

前端卡卡西呀

最新推荐文章于 2025-05-27 21:41:06 发布

阅读量6.3k

点赞数 9

CC 4.0 BY-SA版权

分类专栏：前端进阶之路

本文链接：https://blog.youkuaiyun.com/RedaTao/article/details/82624286

前端进阶之路专栏收录该内容

145 篇文章

订阅专栏

本文介绍了一种前端开发中实现倾斜Tab的设计方法，包括如何通过transform属性实现内容倾斜及复原，以及如何使用border-radius和overflow属性配合实现圆角效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端开发过程中难免会遇到倾斜的tab设计，并且两边要做成圆角效果，如下图：

我的想法：

1. 给每个tab项设置transform：skew(角度值)实现倾斜效果，但是，此时里边内容也会跟着倾斜，所以给内容单独加一个容器，给该容器重新设置偏转回去即可；

2. 两边的圆角，在tab项外边套一个div，给这个div设置border-radius，但是，因为此时这个父容器是被tab项撑开的，但是tab项左右两边是倾斜的，出现如下效果：

需要想办法把tab项的尖角去掉，怎么去掉呢？没错，overflow：hiddden；所以给父容器（content）加上，因为两边都需要盖住尖角（上图左上角和右下角），那么父容器的宽度就需要比tab项的宽度稍微少那么点，但是也不能少太多，不然圆角会有瑕疵，正好遮住最好（数值自行测试）,并且需要把tab项整体（此时需要给tab再加一层父容器content-nav，在上文的父容器content之内）往左移动一点，正好显示出来为好。

项目代码：

    <div class="content">
		<div class="content-nav">
			<div class="item">
				<div class="item-word">测试tab111</div>
			</div>
			<div class="item">
				<div class="item-word">测试tab222</div>
			</div>
			<div class="item">
				<div class="item-word">测试tab333</div>
			</div>
		</div>
	</div>

        .content {
			width: 550px;
			background: #f00;
			white-space: nowrap;
			border-radius: 15px;
			overflow: hidden;
		}

		.content-nav {
			margin-left: -33px;
		}

		.item {
			width: 200px;
			height: 30px;
			display: inline-block;
			font-size: 24px;
			text-align: center;
			line-height: 30px;
			background: linear-gradient(90deg, rgba(255, 163, 0, 1) 0%, rgba(249, 214, 45, 1) 100%);
			transform: skew(30deg);
		}

		.item-word {
			transform: skew(-30deg);
		}

如此，即可出现本文最开始的效果。