带小三角形的tab切换效果实现（css&background）css方法兼容性不够完善

最新推荐文章于 2025-08-10 16:30:00 发布

最新推荐文章于 2025-08-10 16:30:00 发布 · 1.1k 阅读

文章标签：

#css #css三角形 #border模拟三角形

css 专栏收录该内容

1 篇文章

订阅专栏

本文分享了一个在网页设计中使用背景图替代边框实现三角形效果的方法，解决了IE系列浏览器兼容性问题，并通过代码示例展示了不同浏览器的兼容性表现。

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

根据块级元素的border表现形式做的三角形,但是发现在IE系列浏览器里面兼容性不够好,后面改用背景图实现,具体相关代码如下:


<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>em模拟小三角</title>
<style type="text/css">
*{margin:0;padding:0}
body{font:12px/1.5 simsun;color:#000;text-align:center}
ul,li{list-style:none}
div{margin:0 auto}
.demo{overflow:hidden;margin-top:20px;width:580px;text-align:left}
.demo h3{font-size:14px}
.demo pre{clear:both}

/* css实现三角形,因为IE下的z-index问题,而不采用,归根结底还是设计的问题+IE对z-indexBUG的问题 */
.addondomaintabbox{height:24px}
.addondomaintab{margin-bottom:10px;width:579px;height:24px;font-size:14px}
.addondomaintab li{float:left;margin-right:3px;width:190px;height:24px;background:#ffe8b8;text-align:center;font-weight:bold;color:#f75500;line-height:24px;position:relative}
.addondomaintab em{width:0;height:0;line-height:0;border-width:12px;border-style:dotted dotted dotted solid;position:absolute;top:0}
.addondomaintab .leftem{border-color:transparent transparent transparent #fff9e9;left:0;z-index:1}
.addondomaintab .rightem{border-color:transparent transparent transparent #ffe8b8;left:190px;z-index:2}
.addondomaintab .on{background:#f60;color:#fff;}
.addondomaintab .on .rightem{border-color:transparent transparent transparent #f60;z-index:3}
.addondomaintab .on .leftem{border-color:transparent transparent transparent #fff9e9}

.addondomaintabbox_1{height:24px;position:relative;}
.addondomaintab_1{margin-bottom:10px;width:590px;height:24px;font-size:14px;position:relative}
.addondomaintab_1 li{float:left;width:202px;height:24px;background-image:url(imgs/zz_tab_bg.png);background-repeat:no-repeat;text-align:center;font-weight:bold;color:#f75500;line-height:24px}
.tab_li_1{background-position:0 0}
.tab_li_2{background-position:0 -34px;margin-left:-8px}
.tab_li_3{background-position:0 -68px;margin-left:-8px}
.addondomaintab_1 .tab_li_1_on{background-position:-212px 0;color:#fff}
.addondomaintab_1 .tab_li_2_on{background-position:-212px -34px;margin-left:-8px;color:#fff}
.addondomaintab_1 .tab_li_3_on{background-position:-212px -68px;margin-left:-8px;color:#fff}

</style>
</head>
<body>

<div class="demo">
	<h3>css实现</h3>
	<div class="addondomaintabbox">
		<ul class="addondomaintab">
			<li>1、填写独立域名<em class="rightem"></em>

			<li><em class="leftem"></em>2、审核信息<em class="rightem"></em>

			<li><em class="leftem"></em>3、申请提交成功

		</ul>
		<ul class="addondomaintab">
			<li class="on">1、填写独立域名<em class="rightem"></em></li>
			<li><em class="leftem"></em>2、审核信息<em class="rightem"></em>

			<li><em class="leftem"></em>3、申请提交成功

		</ul>
		<ul class="addondomaintab">
			<li>1、填写独立域名<em class="rightem"></em>

			<li class="on"><em class="leftem"></em>2、审核信息<em class="rightem"></em></li>
			<li><em class="leftem"></em>3、申请提交成功

		</ul>
		<ul class="addondomaintab">
			<li>1、填写独立域名<em class="rightem"></em>

			<li><em class="leftem"></em>2、审核信息<em class="rightem"></em>

			<li class="on"><em class="leftem"></em>3、申请提交成功</li>
		</ul>
	</div>
	<pre>
IE6下有差异，IE没有测（我的IETest新建IE7就挂掉了），IE8兼容，
IE9有差异，FF3.5兼容，chremo10+兼容，Opera10.5兼容，
safari没有装
	</pre>
</div>

<div class="demo">
	<h3>背景图实现</h3>
	<div class="addondomaintabbox_1">
		<ul class="addondomaintab_1">
			<li class="tab_li_1">1、填写独立域名</li>
			<li class="tab_li_2">2、审核信息</li>
			<li class="tab_li_3">3、申请提交成功</li>
		</ul>
		<ul class="addondomaintab_1">
			<li class="tab_li_1_on">1、填写独立域名</li>
			<li class="tab_li_2">2、审核信息</li>
			<li class="tab_li_3">3、申请提交成功</li>
		</ul>
		<ul class="addondomaintab_1">
			<li class="tab_li_1">1、填写独立域名</li>
			<li class="tab_li_2_on">2、审核信息</li>
			<li class="tab_li_3">3、申请提交成功</li>
		</ul>
		<ul class="addondomaintab_1">
			<li class="tab_li_1">1、填写独立域名</li>
			<li class="tab_li_2">2、审核信息</li>
			<li class="tab_li_3_on">3、申请提交成功</li>
		</ul>
	</div>
	<pre>
基本上表现一致。
	</pre>
</div>

</body>
</html>