纯CSS实现三角形-chunzhisu-ChinaUnix博客

文章分类

文章存档

2014年（73）

我的朋友

最近访客

推荐博文

纯CSS实现三角形

分类： Html/Css

2014-07-10 17:20:38

点击(此处)折叠或打开

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<title>CSS特效-纯CSS实现三角形图标</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
article,aside,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{background:#000;}
.box{width:500px;height:400px;position:relative;margin:20px auto;}
b{border-color:-moz-use-text-color transparent;border-left:8px dashed transparent;border-right:8px dashed transparent;border-style:none dashed solid;border-width:0 8px 8px;color:rgba(230,30,29,0.7);color:red\9;font-size:0;height:0;left:29px;line-height:0;position:absolute;top:-8px;width:0;z-index:2;}
.bg{background:rgba(255,255,255,0.5);background:#fff\9;position:absolute;left:0;bottom:0;height:50px;width:100%;}
.cc{position:relative;width:100px;height:50px;background:rgba(230,30,29,0.7);background:red\9;float:left;}
</style>
</head>
<body>
<div class="box">
<img src="/jscss/demoimg/wall6.jpg">
<div class="bg"><a class="cc"><b></b></a></div>
</div>
</body>
</html>

阅读(170) | 评论(0) | 转发(0) |

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们