css实现外向圆角的标签页-小月博客

css实现外向圆角的标签页

一直知道如果css技能够硬真的可以代替很多的js的工作，会用最快的速度，最少的代码，写出最炫酷的页面，所以平时也很喜欢看一些css的技巧，但是如果不去用的话很快就忘记了。最近在工作中正好遇到了一个反向圆角的tab标签页的问题。下面就一起分享一下如何利用css伪类元素实现外向圆角的标签页。

推荐一个课程给大家：《 2021必修首门CSS架构系统精讲理论+实战玩转蘑菇街》 下载通道

需求设计稿：

查看上面的设计稿第一眼感觉很简单，border-radius直接就可以做了，但是仔细去看重点是下面反向的圆角，所以遇到这样的设计稿，我们下面把这个特效依依拆解再来实现。

实现原理

实现原理如下图所示，我们需要一个绿色的圆角，那么用一个蓝色的圆来提供圆角。此外，还需要一个紫色方块。它有两个功能，第一来遮挡黄色方块的边框，第二用来填充蓝色的圆和黄色方块之间的间隙，也就是图中绿色和紫色相交的下半部分。

经过这样子的分解，相信大家很直观的就明白了是如何来实现了的吧，下面给大家写了一个小的demo，代码如下：

html部分

<div class="content">
	<div class="item">1</div>
	<div class="item is_active">
		<a href="#" class="text">2</a>
	</div>
	<div class="item">3</div>
</div>

css部分

<style>
	.content{
		width: 500px;
		height: 40px;
		background: #CCCCCC;
		margin: 50px auto;
		display: flex;
	}
	.item{
		width: 100px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		margin-top: 5px;
	}
	.is_active{
		position: relative;
		background: #f1f1f1;
		border-radius: 10px 10px 0 0;
	}
	.is_active:before, .is_active:after{			
		display: block;	
		position: absolute;
		content: "";
		width:10px;
		height:10px;
		background-color: pink;
		bottom: 0px;
	}
	
	.is_active:before{
		left: -10px;
	}
	
	.is_active:after{
	
		right: -10px;
	
	}
	.text{
		position: relative;
		display: block;
		width: 100px;
		height: 35px;
		line-height: 35px;
	}
	.text:before, .text:after{
		display: block;					
		position: absolute;	
		z-index: 99;
		content: "";			
		width:20px;				
		height:20px;
		border-radius: 100%;	
		background-color: green;
		bottom: 0px;
	}
	.text:before{
		right: -20px;
	}
	.text:after{
		left: -20px;
	}
</style>

效果如下所示：