转载地址：
http://bbs.blueidea.com/thread-2797952-1-1.html
正文：
正文：
css实现斜角的原理主要是利用了div两相互垂直的border的交界 （斜角组合还有更多变化。。。）
<!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>
< http-equiv="Content-Type" content="text/html; charset=utf-8" />
< name="robots" content="all" />
< name="author" content="colinivy" />
<link href="http://www.xhblog.com/style/global.css" rel="stylesheet" type="text/css" media="screen" />
<title> Colinivy's world</title>
<style type="text/css">
* {margin:0; padding:0; list-style:none;}
body {
font-size:63%;
}
#wrapper {
margin:20px;
width:200px;
border: 1px solid #ccc;
font-size:1.2em;
}
#corner {
position:relative;
top:-1px;
left:-1px;
width:0px;
height:0px;
overflow:hidden;
border-top:15px solid #fff;
border-right:15px solid #ccc;
}
#wrapper p {
padding:5px;
text-indent:20px;
}
#joy_left {
width:20px;
height:0px;
overflow:hidden;
border-top:20px solid green;
border-left:20px solid #FFF;
}
#joy_top {
top:-20px;
width:0px;
height:20px;
border-top:20px solid #FFF;
border-right:20px solid red;
}
#joy_bottom {
left:-40px;
top:20px;
width:0px;
height:20px;
border-left:20px solid blue;
border-bottom:20px solid #FFF;
}
#joy_right {
left:-40px;
top:20px ;
width:20px;
height:0px;
overflow:hidden;
border-right:20px solid #FFF;
border-bottom:20px solid #666;
}
.por {
position:relative;
float:left;
}
</style>
</head>
<body>
<div id="wrapper" >
<div id="corner">
</div>
<p>蓝色理想，你是偶的家园！</p>
<p>蓝色理想，你是偶的家园！</p>
<p>蓝色理想，你是偶的家园！</p>
</div>
<div id="joy_left" class="por">
</div>
<div id="joy_top" class="por">
</div>
<div id="joy_bottom" class="por">
</div>
<div id="joy_right" class="por">
</div>
</body>
</html> 
1545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
