纯CSS实现超美选项卡

最新推荐文章于 2023-04-18 17:39:37 发布

宋承佑

最新推荐文章于 2023-04-18 17:39:37 发布

阅读量310

点赞数

分类专栏：前端文章标签： css css3

本文链接：https://blog.csdn.net/weixin_41535944/article/details/115345601

版权

前端专栏收录该内容

39 篇文章 5 订阅

订阅专栏

在这里插入图片描述
纯静态的，后续的内容可以自己加上去哟！！！

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		body{
			background-color: black;
		}
		.main {
			width: 33.33%;
			height: 200px;
			background-color: aliceblue;
			margin: 150px auto;
			position: relative;
			border-bottom-right-radius: 15px;
			border-bottom-left-radius: 15px;
		}
		.tabs {
			width: 100%;
			position: absolute;
			top: -50px;
			left: 0;
			display: flex;
			align-items: flex-end;
			text-align: center;
			font-size: 18px;
		}
		
		.tabs .item {
			width: 60%;
			height: 50px;
			background-color: #fff;
			border-top-left-radius: 15px;
			border-top-right-radius: 15px;
			position: relative;
			line-height: 50px;
		}
		
		.tabs .items {
			width: 40%;
			height: 40px;
			background-color: #FEF0F1;
			border-top-right-radius: 15px;
			line-height: 40px;
		}
		
		.tabs .item::after {
			content: '';
			width: 0;
			height: 0;
			position: absolute;
			bottom: 0;
			right: -50px;
			border-top: 42px solid transparent;
			border-left: 21px solid #FFFFFF;
			border-right: 30px solid transparent;
		}
		
		.active {
			color: #FD2D3B;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="tabs">
			<div class="item active">
				微信分享
			</div>
			<div class="items">
				朋友圈分享
			</div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

宋承佑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
纯CSS实现超美选项卡

纯静态的，后续的内容可以自己加上去哟！！！<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t.
复制链接

扫一扫