纯 css 实现斜角 [复制链接]

colinivy　楼主

柯零艾薇

荣誉管理 

帖子: 2070
体力: 21223
威望: 38
居住地: 广东省深圳市

发表于 2007-10-9 18:57:18 |显示全部楼层

RT，css实现斜角的原理主要是利用了div两相互垂直的border的交界（斜角组合还有更多变化。。。）

如图，相信大家看到图了就应该明白的原理了。（相互垂直的border-width可以设置不同得到不同倾斜度的斜角，但是有锯齿，所以舍之）

实例在可运行代码中。

<!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" />
<meta name="robots" content="all" />
<meta name="author" content="colinivy" />
<link href="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>

提示：您可以先修改部分代码再运行

[ 本帖最后由 colinivy 于 2007-10-9 22:17 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

宽己之心宽人，责人之心责己-----天地宽矣！

		自动登录	找回密码
密码			注册

纯 css 实现斜角 [复制链接]

回复 #1 colinivy 的帖子

我不明白为什么只定义上边框和右边框怎么会出现斜角

回复 #14 136518411 的帖子

CSS真是一个奇妙的东西啊

浏览过的帖子

浏览过的版块