css3实现左右锯齿效果

要实现的效果：css3实现左右锯齿效果

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

* {

  padding: 0;

  margin: 0;

}

.demo {

  list-style: none;

  width: 100%;

  height: 180px;

  text-align: center;

}

.demo li {

  position: relative;

  width: 20%;

  height: 100%;

  margin-right: 3%;

  background: #f60;

  display: inline-block;

}

.demo li:before, .demo li:after {

  content: "";

  position: absolute;

  top: -20px;

  display: block;

  width: 10px;

  height: 100%;

  margin-top: 20px;

  background-size: 20px 10px;

}

.demo li:before {

  left: -10px;

  background-color: #fff;

  background-position: 100% 35%;

  background-image: linear-gradient(-45deg, #f60 25%, transparent 25%, transparent),

                  linear-gradient(-135deg, #f60 25%, transparent 25%, transparent),

                  linear-gradient(-45deg, transparent 75%, #f60 75%),

                  linear-gradient(-135deg, transparent 75%, #f60 75%);

}

.demo li:after {

  right: -10px;

  background-color: #f60;

  background-position: 100% 15%;

  background-image: linear-gradient(-45deg, #fff 25%, transparent 25%, transparent),

                 linear-gradient(-135deg, #fff 25%, transparent 25%, transparent),

                 linear-gradient(-45deg, transparent 75%, #fff 75%),

                 linear-gradient(-135deg, transparent 75%, #fff 75%);

}

</style>

</head>

<body>

<ul class="demo">

  <li></li>

  <li></li>

  <li></li>

</ul>

</body>

</html>

demo：效果

原文地址：http://www.qdfuns.com/notes/29797/d6acfd6011835aabc3ac11d6abed3e59.html

巴特西

css3实现左右锯齿效果

最新文章

热门文章