Tạo đường viền Zig Zag với CSS

Nếu các bạn cảm thấy nhàm chán với các kiểu đường viền (border) thẳng, thì hãy thử xem mẫu đường viền zig zag mà mình chia sẻ trong bài viết này xem thế nào. Đảm bảo là các bạn sẽ có ngay những ý tưởng thiết kế web cho những dự án sắp tới của mình.

HTML

Để tạo đường viền các bạn chỉ cần xây dựng theo khung chuẩn html như sau :

<div class="container1"></div>
<div class="container2 zigzag"></div>
<div class="container3 zigzag"></div>
<div class="container4 zigzag"></div>

Các bạn thấy đó, mình không sử dụng bất kì một file hình ảnh nào, mà chỉ có những thẻ <div> bình thường như cơm sườn bình dân.

CSS

Và đây là toàn bộ đoạn css giúp các bạn tạo đường viền theo ý muốn.

.container1 {
  awidth: 100%;
  height: 200px;
  background: #222;
}
.zigzag {
  position: relative;
  awidth: 100%;
  height: 200px;
  -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.8) 0px 1px 2px);
}
.zigzag:before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  awidth: 100%;
  height: 10px;
}
.container2 {
  background: #E2E2E2;
}
.container2:before {
  background:
    linear-gradient(
      45deg, transparent 33.333%,
      #E2E2E2 33.333%, #E2E2E2 66.667%,
      transparent 66.667%
    ),
    linear-gradient(
      -45deg, transparent 33.333%,
      #E2E2E2 33.333%, #E2E2E2 66.667%,
      transparent 66.667%
    );
  background-size: 20px 40px;
}
.container3 {
  background: #FFF;
}
.container3:before {
  background:
    linear-gradient(
      45deg, transparent 33.333%,
      #FFF 33.333%, #FFF 66.667%,
      transparent 66.667%
    ),
    linear-gradient(
      -45deg, transparent 33.333%,
      #FFF 33.333%, #FFF 66.667%,
      transparent 66.667%
    );
  background-size: 20px 40px;
}
.container4 {
  background: #CCC;
}
.container4:before {
  background:
    linear-gradient(
      45deg, transparent 33.333%,
      #CCC 33.333%, #CCC 66.667%,
      transparent 66.667%
    ),
    linear-gradient(
      -45deg, transparent 33.333%,
      #CCC 33.333%, #CCC 66.667%,
      transparent 66.667%
    );
  background-size: 20px 40px;
}

.zigzag:before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  awidth: 100%;
  height: 10px;
}
.container2:before {
  background:
    linear-gradient(
      45deg, transparent 33.333%,
      #E2E2E2 33.333%, #E2E2E2 66.667%,
      transparent 66.667%
    ),
    linear-gradient(
      -45deg, transparent 33.333%,
      #E2E2E2 33.333%, #E2E2E2 66.667%,
      transparent 66.667%
    );
  background-size: 20px 40px;
}

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster