纯css实现的尖角框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用css的border属性实现三角</title>
<style type="text/css">
<!--
.box{ width:300px; height:300px; background:#CCC; position:relative; top:100px;left:100px }
.to-top{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#ccc #fff; border-width:0 6px 6px 6px; position:absolute; left:30px; top:0;margin-top:-6px;}
.to-right{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#fff #ccc; border-width:6px 0 6px 6px; position:absolute; right:0px; top:30px;margin-right:-6px;}
.to-bottom{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#ccc #fff; border-width:6px 6px 0 6px; position:absolute; right:30px; bottom:0;margin-bottom:-6px;}
.to-left{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#fff #ccc; border-width:6px 6px 6px 0 ; position:absolute; left:0; bottom:30px;margin-left:-6px;}
-->
</style>
</head>
<body>
<div class="box"><em class="to-top"></em><em class="to-right"></em><em class="to-bottom"></em><em class="to-left"></em></div>
</body>
</html>
原文来自http://www.css88.com/demo/border/border.html
相关阅读：
Tags: css |Comments:(18)|read:(358)
技术博客，我喜欢，加我QQ：kangzj (at) kangzj.net
已经加上了~哈哈~~h
8错，贴个效果图就更好啦
@yanpeng 我的图片服务器挂了……呜呜
学习了，博客不错
我看效果了 真不错！！ 可以给评论里用！
@TaoGOGO
用 appspot域名 jpg的话 用天涯相册
@houkai 目前最重要的是我那所有放在gae上的绑定了域名的图片都成了小窗户了……
@TaoGOGO 修改一下主题就好了！
这也是miclog吗？
@渴慕晨光 是的，呵呵
为什么把孩子打掉了？
@ifu25 什么孩子？我是男儿身
一直想要这个呢..
最近正在学习css
囧.....没有高亮的话就把代码写好看一点吧
囧.....没有高亮的话就把代码写好看一点吧
@bolo 多谢多谢，呵呵，等有空添加个插件