根据块级元素的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>
总体来说,这是一个思路,写在这里以作记录.
背景图片包含在附件中.
- 描述: 最终效果图(IE8)
- 大小: 75.1 KB
- 描述: css中用到的背景图
- 大小: 1.2 KB
分享到:
相关推荐
通过css代码去实现三角形,用在网页开发中,演示通过css去实现菜色的矩形、上三角形、下三角形、右三角形、左三角形。
css--实现透明三角形(来自百度web前端工程师试题)
复制代码代码如下: <style> .b{ position: absolute; z-index: 2; width: 0; height: 0; line-height: 0; font-size: 0; border-width: 5px;... /*如果倒三角形前面的字多于两个,就设置这里的像素值大些*/
纯CSS写带边框的三角形
纯CSS实现多彩三角形有序变化特效动画时尚背景墙。
用纯css绘制三角形,不是用图片
CSS3的transform可以实现页面元素的扭转、变形等功能。...实现如下图所示的三角形小图标只需要transform定义的一行代码即可,无需再使用图片。参考文档: http://blog.csdn.net/u014175572/article/details/51535543
通过特殊字符,利用 css 中的 margin 或者 position 方法完全可以实现以上效果。 复制代码代码如下:<!DOCTYPE HTML><html lang=”en-US”><head> <meta charset=”UTF-8″> <title>字符...
CSS实现逼真的三角形播放器按钮CSS实现逼真的三角形播放器按钮
NULL 博文链接:https://kingkit.iteye.com/blog/692203
还在为网页太多图片加载太慢而发愁吗?纯CSS打造三角形,不需要用图片了!
jquery css3三角形菜单图片切换代码
css三角形、居中、圣杯布局
具体代码如下所示: html代码是这样的 <!--向上的三角--> <!--向下的三角-->...下面用CSS3分别实现向上、下、左、右的三角形 /*箭头向上*/ .arrow-up { width:0; height:0; border
CSS伪元素非常有用,它提供了一种无需多余的DOM元素来实现一些常见的功能的方法,以下利用其实现一个带三角形的tooltip。 下面是DOM结构:下面是对应的CSS样式: XML/HTML Code复制内容到剪贴板 bottom> ...
08.code css实现三角形.zip
css border三角形
主要介绍了CSS导航条菜单之带小三角形的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
最近网上看到一个前端面试题,要求面试者用纯CSS实现一个6边形的效果 乍一看有点乱,但是仔细分析下,其实并没有那么难 将六边形拆开成三部分,左边是一个三角形,中间一个长方形,右侧再来一个三角形,然后再...