纯CSS打造斜角
蓝色理想论坛上用一张老帖子，说的是CSS打造斜角，前几天看到了，拿来翻炒一下。
先说一下历史，在CSS+DIV流行以前，也就是用表格作为网页框架的时候，人们通过在一个单元格里加入一个斜角图片来来做这种效果的。这种技术现在已经完全过时了，这里不讨论。CSS+DIV兴起以后，出现了两种制作斜角效果的方法，一个是通过backgroud-image属性添加斜角图片作为背景，并且用padding属性使内容缩进，不超出斜角的边界。这种方法也不在这篇文章的讨论范围。
这次要说的是纯CSS打造的斜角，也就是说完全不需要图片。
相对于纯CSS打造圆角，做斜角简单多了。请看以下实例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <head>
<style type="text/css">
* {margin:0; padding:0; list-style:none;}
#wrapper {
height:0;
width:0;
border-top:20px solid red;
border-right:20px solid blue;
border-bottom:20px solid green;
border-left:20px solid grey;
}
</style>
</head>
<body>
<div id="wrapper" >
</div>
</body> |
运行后效果如下图:
看图后大家应该已经知道了斜角产生的原理。一个元素相连的两条border相接处为斜角的特点，增大border的宽度，并填充不同的颜色。从而产生肉眼可见的斜角。
下面在来看看怎么产生其他角度的斜角。看以下代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <style type="text/css">
span {
width: 0px;
height: 0px;
}
span.left {
border-left: 90px solid white;
border-bottom: 160px solid red;
}
span.right {
border-right: 90px solid white;
border-bottom: 160px solid red;
}
</style>
<div align="center">
<span class="left"></span>
<span class="right"></span>
</div> |
运行后效果如下图：
相信到这里大家也明白了，例如你要做的一个60°的斜角，那就计算一下60°的tan（正切）值，并根据比例来定义相关border的宽度吧。
够专业
大菠萝来评小菠萝了！
正好也在研究CSS，学习一下！
N年前做过一个斜角表格，和这个道理是一样的。
你太霸道了，这个够专业的。
这个斜角是遮蔽产生的，还是挤到一起各留一半呢。
连正切值都用上了，牛！
jquery有这个插件
有技术就是不一样
应用到你主题里面去？
@菠萝
大家互相学习
@keelii
从CSS技术产生开始就有人这么干了
@LAONB
都不是，border本来就是这样渲染的
@万戈
不是这样算的么？
@ooaixt
太依赖jQuery不好
@一天一歌
打算在下个主题里用上
没上过高中 不懂这玩意的飘过…
学习了~菠萝同学CSS越来越精通的哈
汗死。。。
厉害，过来学习下~~
学过了,复习一下.
博主对CSS很精通
( ⊙o⊙ )哇 这招牛啊~
不错的方法，应用起来不知道会不会造成麻烦
学习了，以后可能会用得着