您的位置：首页 > Web前端 > CSS

css3 做一个漂亮的分割线

2016-03-28 11:13 507 查看

在网页中我们经常会用到分割线，但是原始的分割线并不太美观，我们可以用css3的skew属性做一个美观一点的分割线：

效果：

分辨率改变：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.littdivcss{
width:20px;height:20px;transform:skewX(30deg);float: left
}
.littdivpaddingcss{
width:20px;height:20px;transform:skewX(30deg);float: left
}
.littdivcss:nth-child(4n+1)
{
background:red;
}
.littdivcss:nth-child(4n+3)
{
background:blue;
}
</style>
</head>
<body>
<div id="container" style="">
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>
<script type="text/javascript">
var littlediv="<div class='littdivcss'></div><div class='littdivpaddingcss'></div>";
var docwidth=$(document).width();
var numdiv=docwidth%40==0?docwidth/40:(docwidth/40)-1;
for(var i=0;i<numdiv;i++){
$("#container").append(littlediv);
}
</script>
</html>

其中

nth-child(4n+1)

选择器表示隔三取一，

nth-child(4n+3)

自然是隔三取最后一个

获取文档的宽度

var docwidth=$(document).width();

来除以平行四边形的宽度20，因为后面用了20的透明div来做为间距

var littlediv="<div class='littdivcss'></div><div class='littdivpaddingcss'></div>";

后面的div用来作为间距，这里就除以40。

可能存在余数导致多出一个小的平行四边形，所以判断一下，有余数就减去一个。

var numdiv=docwidth%40==0?docwidth/40:(docwidth/40)-1;

最后将组合的div分割线追加到

<div id="container">

容器中:

for(var i=0;i<numdiv;i++){

$("#container").append(littlediv);

}

源码下载：http://pan.baidu.com/s/1pKZ0BA7

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航