css 兼容小三角

2024-04-27 14:30:01

字体：大中小

来源：转载

供稿：网友

CSS 兼容小三角

<!DOCTYPE><html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css" > .index_nav a:hover i, .index_nav a.on i {display: inline-block;width: 0;height: 0;font-size: 0;overflow: hidden;position: absolute;bottom: -26px;left: 50%;border: 13px dashed transparent;border-top: 13px solid #ea331a; }</style>

</head>

<body>

效果截图：

------------2015.1.19补充更新-------------------

移动端三角可以利用伪类直接省略掉空标签：

html：

<h2>全部最新上架</h2>

css：

h2:after{ position: absolute;margin-left: 50%;left: 50px;top: 9px;/*border: 6px dashed transparent;border-left: 6px solid rgba(255,255,255,1);*//*兼容的三角写法*/

content:''; border-color:transparent transparent transparent rgba(255,255,255,1); border-width:6px 9px; border-style:solid;}

上一篇：10款CSS3按钮

下一篇：css3照片墙