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>

效果如下所示:

上面的颜色是为了清晰看出实现的步骤, 就是利用的css的伪类元素,这里需要注意的因为用到了多个伪类元素,所以层级关系一定要调整好哦。

有兴趣的小伙伴可以自己来实现一下, 因为实现一个小功能心情总是好的哦。

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(1) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

小月博客-一个专注于分享的技术博客
没有账号? 忘记密码?