css实现带边框的三角形

最新推荐文章于 2025-05-14 17:03:41 发布

csdn_xw

最新推荐文章于 2025-05-14 17:03:41 发布

阅读量1.1k

点赞数 2

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/csdn_xw/article/details/76928480

版权

css 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<style type="text/css"> 
		.tab-container{
			width:252px;
		}
		.tab{
			position:relative;
			height:40px;
			float:left;
			width:250px;
			margin-top:10px;
			border:1px solid #5ec264;
			cursor:pointer;
		}
		.tab-left{
			height:40px;
			line-height:40px;
			float:left;
			width:50px;
			background-color:#fff;
			text-align:center;
		}
		.tab-left:after{
			width:0;
			height:0;
			content:'';
			position:absolute; 
			border-width:20px 0 20px 16px;
			border-style:solid;
			border-color:transparent transparent transparent #fff;
			top: 0;
			left: 50px;
		}
		.tab-left:before{
			width:0;
			height:0;
			content:'';
			position:absolute; 
			border-width:20px 0 20px 16px;
			border-style:solid;
			border-color:transparent transparent transparent #5ec264;
			top: 0;
			left: 52px;
		}
		.tab-right{
			height:40px;
			line-height:40px;
			width:200px;
			float:left;
			background-color:#fff;
			text-align:center;
		}
		.tab.selected .tab-left{
			background-color:#5ec264;
		}
		.tab.selected .tab-left:before{
			border-color:transparent transparent transparent #fff;
		}
		.tab.selected .tab-left:after{
			border-color:transparent transparent transparent #5ec264;
		}
		.tab.selected .tab-right{
			background-color:#5ec264;
		}
		.tab a{
			font-size:15px;
			color:#5ec264;
		}
		.tab.selected a{
			color:#fff;
		}
	</style>
</head>
	<body>
		<div class="tab-container">
		    <p>带边框三角形的实现，大小两个三角形重叠，较大的位于下方作为边框，较小的浮于上方作为三角形的内容</p>
			<div class="tab">
				<div class="tab-left"><a>1</a></div>
				<div class="tab-right"><a>222 sgsd</a></div>
			</div>
			<div class="tab selected">
				<div class="tab-left"><a>2</a></div>
				<div class="tab-right"><a>222 sgsd</a></div>
			</div>
			<p>使用元素的before和after属性，优先级after高于before，然后分别做出两个形状大小相同的小三角形，before的border-color是元素的边框颜色，after的border-color是元素的背景颜色，然后错开重叠，就能形成边框的效果。</p>
		</div>
	</body>
</html>